Question

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

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

任何人都知道我做错了什么？ THX

Answer 1

您实施了两次相同的功能：

默认情况下，此复选框具有切换行为，由浏览器实施。 Knockout使用checked绑定插入此功能。您传递一个observable，并存储该值：

＆＃13;

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

＆＃13;

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

＆＃13;

问题

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

self.selecAllBT(!self.selecAllBT);

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

解决方案

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

＆＃13;

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

＆＃13;

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

＆＃13;

敲除检查绑定没有更新

1 个答案:

问题

解决方案