Question

我正在尝试处理我的Magento项目上的复选框检查事件，这是我的复选框的html代码：

<td class="col col-method">
    <input type="checkbox" data-bind="checked: checkedAction, click: clickedAction"/>
</td>

以下是js代码：

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko'
], function ($, _, Component, ko) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/checkout/shipping/template'
        },
        initialize: function() {
            var self = this;
            this._super();
            this.setCheckbox();
        },
        setCheckbox: function() {
            var viewModel= {
                selectedAction: ko.observable(false),
                clickedAction: function() {
                    window.alert('checkbox checked!!');
                    return true;
                }
            };

            ko.applyBindings(viewModel);
        }
    });
});

不幸的是，你能指出这里有什么问题吗？

Answer 1

在Knockout上使用复选框click绑定几乎总是错误的。特别是，在复选框上同时使用checked和click绑定通常表示对它们的工作方式存在误解，并且最终会让两个操作相互踩踏。

checked绑定会将复选框的状态注册到变量中，它是双向的：复选框和变量将保持同步，无论它是在视图中还是在代码中更改。要在状态发生变化时发生某些事情，您可以subscribe使用您想要发生的任何变量。

例如：

vm = {
  state: ko.observable(false)
};

vm.state.subscribe(function(newState) {
  if (newState) {
    alert("Checked!");
  } else {
    alert("Unchecked!");
  }
});

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="checkbox" data-bind="checked: state" />

Answer 2

没有checked事件。有click和change个事件。

有一种在淘汰赛中绑定事件的通用方法，而不使用自定义绑定。像这样：

var vm = {
	clicked: function() {alert('Clicked!')},
	changed: function() {alert('Changed!')},
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js">
</script>
<label>
Click me! <input type="checkbox" data-bind="event: {change: clicked}"/>
</label>
<label>
Change me! <input type="checkbox" data-bind="event: {change: changed}"/>
</label>

对于某些事件，还有一些特定的绑定，例如点击这一点：

Click me! <input type="checkbox" data-bind="click: clicked"/>

选中binding是指根据复选框状态设置为true或false的可观察对象。

注意：请参阅Roy J的答案中的有趣点。此答案显示了如何在复选框中使用事件。但是，正如Roy J指出的那样，如果您真正需要检测的是检查状态发生了变化，那么订阅相应的observable要好得多。以错误的方式处理事件可能会导致问题：例如，您可以避免使用复选框来更改其状态，特别是如果您使用jQuery事件。请参阅：knockout.js and listen to check event on checkbox

听Magento上的knockout.js复选框checkevent

2 个答案: