取消复选框绑定

Knockout check box binding

本文关键字：绑定 复选框 取消      更新时间：2023-09-26

我试图有一个复选框更新一个可观察对象的值。这部分工作，但复选框之后不"检查"自己。为了解决这个问题，我尝试添加check:绑定，寻找我刚刚在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值。

见此处

你可以使用computed来捕捉可观察到的变化:

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);
    });
};

这是一个jsfield

checked绑定希望是双向的，既可写又可读。但是，当您单击它时，它不能写入测试。而不是有一个点击绑定，你应该有一个测试设置为4的写入功能，你使用的计算作为checked绑定。

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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="checkbox"  data-bind="checked: checked"/>
<div data-bind="text:test"></div>

相关文章：