javascript - 挖空复选框装订

Question

我正在尝试让一个复选框更新可观察值的值。这部分有效，但该复选框之后不会“检查”自身。为了解决这个问题，我尝试添加checked:绑定(bind)，查找我刚刚在单击事件中设置的值，但这也不起作用。

我的观察

appViewModel.test = ko.observable(1);

复选框

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

Answer 1

您可以编写一个点击处理程序来检查该值是否为 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());

注意:我添加了调试输出，以便您在与复选框交互时可以在 View 模型中看到底层 checkBoxValue 值。

参见jsFiddle here