淘汰赛检查绑定不更新答案

【问题标题】：knockout checked binding doesn't update淘汰赛检查绑定不更新
【发布时间】：2016-12-21 16:25:55
【问题描述】：

我有可以选择的对象列表。我制作了一个全选复选框以单击全选。选择有效，但它不会更新复选框值本身。此外，取消选择不起作用，因为该值永远不会为真。

//html
<input type="checkbox" data-bind="checked: selecAllBT, click: selectAll" /> Select all
//other stuff

//JS
    self.selecAllBT = ko.observable(false);

    self.selectAllBodyTypes = function (self) {
     for (i = 0; i < self.items().length; i++) {
        if (self.selecAllBT() != self.items()[i].selected()){
            self.toggleSelected(self.items()[i]);
        }
    }
    self.selecAllBT(!self.selecAllBT);

    return true;

   }

我把它放在一个 JSFiddle 中： https://jsfiddle.net/5mquej1f/21/ （我实际上重用了另一个问题的 JSFiddle，以防有人认出它：knockout observablearray in 2 templates）

有人知道我做错了什么吗？谢谢

【问题讨论】：

标签： javascript knockout.js checked

【解决方案1】：

您要实现相同的功能两次：

复选框默认具有切换行为，由您的浏览器实现。 Knockout 使用 checked 绑定插入此功能。您将其传递给 observable，并存储该值：

var VM = function() {
  this.selectAllBT = ko.observable(false);
};

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<label>
  <input type="checkbox" data-bind="checked: selectAllBT" />toggle
</label>
<div>
  Value: <span data-bind="text: selectAllBT"></span>
</div>

问题

现在，您还包含了click 绑定。此绑定侦听任何元素上的 click。在您的点击侦听器中，您可以通过以下方式切换值：

self.selecAllBT(!self.selecAllBT);

然后，您 return true 将事件传递给复选框。复选框会自然变化，绑定值将再次切换，将其更改回旧值。

解决方案

实现这一点的更好方法是删除click 侦听器并在后面的代码中将subscribe 添加到您的复选框值：

var VM = function() {
  this.selectAllBT = ko.observable(false);
  
  this.doSomethingElse = function(selectAllValue) {
    console.log("Do work for new selectAll state:", selectAllValue);
  }
  
  this.selectAllBT.subscribe(this.doSomethingElse, this);
};

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<label>
  <input type="checkbox" data-bind="checked: selectAllBT" />toggle
</label>

【讨论】：