Question

我正在尝试使用复选框更新observable的值。这部分工作，但复选框后不会“检查”自己。为了解决这个问题，我尝试添加checked：binding，查找我刚刚在click事件中设置的值，但这也不起作用。

My Observable

appViewModel.test = ko.observable(1);

复选框

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

Answer 1

您可以使用计算来捕获可观察的更改：

var ViewModel = function(first, last) {
    var self = this;
    this.checked = ko.observable(false);
    this.test = ko.observable();
    this.isChecked = ko.computed(function(){
        var test = self.test();
        if(test === '4')
        {
            self.checked(true);
            return;
        }
        self.checked(false);
    });
};

这是jsfiddle

Answer 2

checked绑定想要双向，可写和可读。但是，当您单击它时，它无法写入测试。您应该使用计算的write函数将测试设置为4，而不是使用单击绑定。{/ 1}}绑定。

＆＃13;

checked

＆＃13;

var vm = {
  test: ko.observable(1)
};
vm.checked = ko.computed({
  read: function () { return vm.test() == 4; },
  write: function (newValue) {
    vm.test(newValue ? 4 : 1);
  }
});
ko.applyBindings(vm);

＆＃13;

Answer 3

您可以编写一个单击处理程序，检查该值是否为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

淘汰复选框绑定

3 个答案: