javascript - 在 Knockout.js 中绑定(bind)更新

Question

对于任何熟悉 Knockout.js 的人来说，这可能是一个非常基本的问题，但它给我带来了问题。

我遇到的情况是，我有一个模型，其中包含动态添加到 View 中并显示在 View 中的项目数组。

到目前为止没有问题，我可以将条目添加到模型中并且 View 会相应更新。

但是。数组本身中的每个项目都有一个数组作为属性，这是一个对象数组，当我更新这些对象的属性时， View 不会更新。

很难证明这是一个简短的代码片段，因此我创建了一个 JsFiddle 来显示问题:

https://jsfiddle.net/mikewardle/t0nvwqvL/1/

我尝试通过调用生成属性

ko.observable()

而不是直接初始化它们，但无济于事。

单击添加按钮将项目添加到模型本身的数组中。

任一更改...按钮都会更改内部数组中对象的属性。

Answer 1

正如 Ko2r 所说，你的属性没有声明为可观察的，因此 knockout 不会注意到更新。

要修复您的 changecolors() 函数，您只需更改 linePusher 函数以将颜色创建为可观察的:

var linePusher = function (color, name) { 
    self.lines.push({ color: ko.observable(color), name: name, current:0 });
};

然后更新颜色属性的用法以装箱/取消装箱可观察值，而不是用标准赋值运算符“=”替换其值

for (i=0;i<counters.length;i++){        
  var lines = counters[i].lines();
  for (j=0;j<lines.length;j++){
    //lines[j].color = color;
    lines[j].color(color); //sets the existing observable to the new value
  }
}

不幸的是，我似乎无法充分理解您的代码，无法弄清楚 increment() 函数应该做什么，所以我无法告诉您如何修复它，但是希望对 changecolors() 的修复能让您走上正轨。

您可能想阅读 working with observables