敲除检查的绑定不会更新 [英] knockout checked binding doesn't update

问题描述

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

I have list of objects I can select. I made a select all checkbox to click which selects all. The selecting works, but it doesn't update the checkbox value itself. Also, deselecting doesn't work, because the value is never 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，以防有人认识到它:在2中敲除observablearray模板)

I put it in a JSFiddle: https://jsfiddle.net/5mquej1f/21/ (I actually reused a JSFiddle from another issue of me, in case somebody recognizes it: knockout observablearray in 2 templates)

有人知道我在做什么错吗?

Anyone an idea what I'm doing wrong? thx

推荐答案

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

You're implementing the same functionality twice:

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

The checkbox has toggle behaviour by default, implemented by your browser. Knockout plugs in to this functionality using the checked binding. You pass it an observable, and the value is stored:

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.在点击侦听器中，您可以通过以下方式切换值:

Now, you've also included a click binding. This binding listens to a click on any element. In your click listener, you toggle the value by:

self.selecAllBT(!self.selecAllBT);

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

Then, you return true, passing the event to the checkbox. The checkbox will change naturally, and bound value will toggle again, changing it back to the old value.

一种更好的方法是删除click侦听器，并在后面的代码中为复选框值添加subscribe:

A better way of implementing this, is removing the click listener and adding a subscribe to your checkbox value in the code behind:

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>

这篇关于敲除检查的绑定不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！