javascript - knockout 检查的绑定(bind)不会更新

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

//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)

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

最佳答案

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

默认情况下，该复选框具有切换行为，由您的浏览器实现。 knockout 使用checked绑定(bind)插入了此功能。您将其传递给可观察的值，并存储该值:

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绑定(bind)。此绑定(bind)侦听任何元素上的click。在点击监听器中，您可以通过以下方式切换值:

self.selecAllBT(!self.selecAllBT);

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

解

实现此目的的更好方法是删除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>

关于javascript - knockout 检查的绑定(bind)不会更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41267467/