按钮启用绑定未更新答案

【问题标题】：Button enable binding not updated按钮启用绑定未更新
【发布时间】：2017-10-17 00:12:30
【问题描述】：

我正在尝试根据observableArray 的内容启用/禁用按钮。如果数组至少包含一个元素，则必须启用按钮。

使用复选框列表上的click 绑定填充数组，以便在选中复选框后将项目添加到数组中（并在未选中时删除）。

调试显示数组已正确填充，当我打印它的长度时，按钮仍然不会改变它的状态。

这里有一些代码：

<input type="checkbox" data-bind="click: $root.changeCheckboxState" />
...
<button class="btn btn-primary" data-bind="enable: list().length > 0">TEST BUTTON</button>

...

vm.list = ko.observableArray([]);
vm.changeCheckboxState = function (item){
    // if list contains the item we remove it, otherwise we add it
    console.log(vm.list().length); // prints values higher than 0
}

我也尝试使用返回 vm.list().length 的计算，但没有任何反应。

我做错了什么？

【问题讨论】：

你是如何修改你的 observable 数组的？如果您使用vm.list.push 和vm.list.remove，enable 绑定应该更新。然而，如果你只是修改inner数组（例如：vm.list().splice），knout不会自动更新所有依赖，你必须手动触发@ 987654330@。最后，确保在复选框上使用checked 绑定而不是click 绑定。
我正在使用click，因为我正在跟踪我的复选框中的更改，其中一些可能已经被选中。通过click 事件，我将项目添加到修改后的项目中（或者如果它已经存在，则将其删除，因为它正在恢复到原来的状态）。使用remove 有效，如果您将其作为答案发布，我会接受。
您能否在jsFiddle 中重现该问题？可能有助于确定问题。

标签： javascript arrays knockout.js

【解决方案1】：

可观察数组是对添加依赖跟踪的常规数组的封装。为了让淘汰赛能够通知订阅者任何更新，您需要确保：

通过observableArray 实例执行所有更新，保持内部的常规数组不变，或者
每当您修改常规数组时，告诉 knockout 您已经明确地进行了更改（这违背了自动依赖跟踪的目的...）

假设你有这个sn-p：

var myArray = [ 1, 2, 3 ];
var obsArray = ko.observableArray(myArray);

var obsArray.subscribe(function(innerArray) {
  console.log(innerArray);
});

不该做什么：

Knockout 无法神奇地感知 myArray 的修改

myArray.push(4);      // Won't log
myArray.splice(2, 1);  // Won't log

什么将起作用：

使用observableArray中提供的方法：

obsArray.push(4);     // Will log [ 1, 2, 3, 4 ]
obsArray.remove(3);   // Will log [ 1, 2, 4 ]

使用remove 时淘汰赛对您有什么作用：

It gets the reference to myArray by calling peek on the observable one
它检查是否有要删除的项目，如果有，it marks that the inner array is about to change
mutates the inner array 就像您在“不该做的事*”示例中所做的那样。
完成后tells all dependencies to update

总结：

Knockout 的可观察数组方法在更改引用数组时调用 valueHasMutated，从而更新所有依赖项，例如您的 enable 绑定。

【讨论】：