javascript - knockout 复选框绑定(bind)

我试图有一个复选框更新可观察值。这部分起作用，但是此复选框之后不会对其进行“检查”。为了解决这个问题，我尝试添加checked：绑定，以查找我刚刚在click事件中设置的值，但这也不起作用。

我的观察

appViewModel.test = ko.observable(1);

复选框

<input type="checkbox"  data-bind="checked: test() == 4, click: test.bind($data, 4)"/>

最佳答案

您可以编写一个单击处理程序，以检查该值是否为4（或所需的任意值），然后可以采取相应的操作，如下所示：

HTML：

<input type="checkbox" data-bind="checked: checkBoxValue() === 4,
                                  click: handleCheckBoxClick">
<br/>
<div>
    <span>Debug:</span>
    <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
</div>

JavaScript：

var ViewModel = function () {
    var self = this;
    self.checkBoxValue = ko.observable(0);
    self.handleCheckBoxClick = function () {
        if (self.checkBoxValue() !== 4) {
            self.checkBoxValue(4);
        } else {
            self.checkBoxValue(0);
        }

        return true;
    };
};

ko.applyBindings(new ViewModel());

注意：我添加了调试输出，以便在与复选框交互时可以在视图模型中看到基础checkBoxValue值。

见jsFiddle here