Question

我尝试根据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的计算，但没有任何反应。

我做错了什么？

Answer 1

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

通过observableArray实例执行所有更新，并保持常规数组不变，或
告诉你每次修改常规数组时，你都明确地做了更改（这种方式违背了自动依赖关系跟踪的目的......）

说你有这个片段：

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绑定。

按钮启用绑定未更新

1 个答案: