knockout.js - 结帐页面上的淘汰赛 Js magento 2
问题描述
我已经创建了模板 .html
<div data-bind="foreach: productOverGift, visible: expanded" class="free-gift-oder75">
<div class="product-over-info">
<input type="radio" class="product-information" name="productId" data-bind="attr: { value: id, id:'product_over_'+id}, click: $parent.selectItem(id, sku)"/>
<image data-bind="attr: { src: image}" class="product-image" width="120" height="150" alt="Product Image" style="width: 50px; height: 50px"/>
<span data-bind="text: name"></span>
</div>
</div>
并创建文件js
define(
[
'jquery',
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/quote',
'mage/url',
'mage/storage',
'Magento_Checkout/js/action/get-totals',
'mage/translate',
'Magento_Ui/js/model/messageList',
'Magento_Checkout/js/model/full-screen-loader'
],
function (
$,
ko,
Component,
_,
stepNavigator,
customer,
quote,
urlBuilder,
storage,
getTotal,
$t,
messageList,
startLoader
) {
'use strict';
/**
* check-login - is the name of the component's .html template
*/
return Component.extend({
defaults: {
template: 'Custom_Checkout/promotion'
},
//add here your logic to display step,
isVisible: ko.observable(true),
isLogedIn: customer.isLoggedIn(),
//step code will be used as step content id in the component template
stepCode: 'promotion-step',
//step title value
stepTitle: 'Logging Status',
productOverGift: ko.observableArray([]),
freeGiftWithPurchase: ko.observableArray([]),
productImageSelected: ko.observable(""),
productNameSelected: ko.observable(""),
idProductSelected: ko.observable(""),
quoteId: ko.observable(""),
isChecked: ko.observable(true),
skuProductSelected: ko.observable(""),
messageError: ko.observable(""),
message: ko.observable(""),
expanded: ko.observable(true),
arrowClass: ko.observable('fa fa-angle-double-up'),
arrowTitle: ko.observable($t('Shrink')),
dataShippingPnr: ko.observable(""),
dataShippingFullName: ko.observable(""),
dataShippingEmail: ko.observable(""),
dataSegmentDisplay: ko.observable(""),
isCheckedOver: ko.observable(true),
isDeleted: false,
/**
*
* @returns {*}
*/
initialize: function () {
this._super();
//register your step
stepNavigator.registerStep(
this.stepCode,
//step alias
null,
this.stepTitle,
//observable property with logic when display step or hide step
this.isVisible,
_.bind(this.navigate, this),
/**
* sort order value
* 'sort order value' < 10: step displays before shipping step;
* 10 < 'sort order value' < 20 : step displays between shipping and payment step
* 'sort order value' > 20 : step displays after payment step
*/
15
);
return this;
},
/**
* select radio
* @param id
* @param quoteId
* @param sku
*/
selectItem: function (id, sku) {
var self = this;
var listProduct = this.productOverGift();
var itemChecked = $('#product_over_' + id).is(":checked");
if (itemChecked) {
if (listProduct.length > 0) {
listProduct.forEach(function (item, i) {
if (item.id === id) {
self.productImageSelected(item.image);
self.productNameSelected(item.name);
self.idProductSelected(item.id);
self.skuProductSelected(item.sku);
}
});
}
// self.deleteItemInCart(oldProductSku, this.quoteId());
// self.saveProductToOrder(id, this.quoteId(), sku);
}
},
});
}
);
我在循环中使用了一个函数“selectItem()”,用于在单击(选中)后输入 => 标记将调用“selectItem”函数。但是现在“selectItem”函数总是在页面加载时被调用,这不是我想要的。我只想在单击输入后调用它。请帮我。谢谢
解决方案
目前,您正在 HTML 中执行该函数,而不是将其引用绑定到单击处理程序。当页面加载时执行它:
click: $parent.selectItem(id, sku)
相反,您应该将对函数的引用绑定到单击处理程序:
click: $parent.selectItem
有多种方法可以访问您的id
和sku
属性,但最简单的方法可能是意识到传递给点击处理程序的第一个参数是forEach: productOverGift
. 因此,将函数的签名重写为selectItem
如下所示:
selectItem: function (data) {
let id = data.id
let sku = data.sku
...
那应该让它为你工作。但是,您可能想考虑查看checked
绑定。这可以帮助您整理代码并以更类似于 KO 的方式进行操作,但这不是必需的。如果您有兴趣解决这个问题,那么您可以将 radio 的值直接绑定到itemChecked
属性,并使用观察者运行您的 selectItem 代码:
produceViewModel.itemChecked.subscribe(function(newValue) {
if (newValue) {
// select product image here, etc
}
});
或者productImage
selection 属性可以是从itemChecked
.
这将摆脱代码中的 jQuery 依赖,并开始以更具反应性的 KO 风格来完成这一切,但要做到这一点,您需要将一些代码从您的代码中移出$parent
并移入产品 VM。
推荐阅读
- sql - 如何将转换为 UTC 的当前时间戳与在 Oracle SQL 上转换为 UTC 的另一个时间戳进行比较?
- matlab - Fortran“全局”变量与 Matlab 函数句柄
- geolocation - 如何从 Here API 更新不正确的标准化位置
- java - 如何按顺序制作
- python-3.x - 尝试使用 selenium 使用代理但无法访问任何 Https 站点
- jquery - 花式树更改 selectMode 3 上当前选定项目的突出显示颜色
- regex - 无法使用 oracle 正则表达式在带有管道的复合分隔符上拆分
- json - 带有 JSON 主体的 GET 方法和带有 RestTemplate 的承载授权
- arangodb - 在 ArangoDB AQL 中,如何从图遍历中返回顶点和边?
- .net - 为什么 VBA 的 VarType 函数说这个 COM 对象是一个字符串?(对象是 .NET 的 System.Object 类的 COM 版本的实例。)这是一个错误吗?