Question

我有一个问题，如果我使用带有observableArray的foreach绑定，我没有看到对observableArray所做的更改反映在屏幕上。

绑定看起来像这样：

<div data-bind="foreach: items">
  <p>
    <input data-bind="value: name" />
  </p>
  <p>Name: <span data-bind="text: name"></span></p>
  <br />
</div>

observableArray看起来像这样：

this.items = ko.observableArray([
    { name: 'Person 1', role: 'Sales' },
    { name: 'Person 2', role: 'Accounts' },
    { name: 'Person 3', role: 'Admin' }
  ]);

这是一个JSFiddle来说明问题： https://jsfiddle.net/ue3opdd2/2/

HTML使用水平中断分为两部分。在第1节中是使用可观察的绑定。如果修改文本框，则会在下面的span元素中看到更改。这很有效。

在第2节中是完全相同的主体，但使用了observableArray和foreach绑定。例如，如果您更改“人1”文本框中的值，我希望看到此更改反映在下面的span元素中，但它不起作用（它保持为“Name：Person 1”）。

我在屏幕底部放了一个调试输出，我也没有看到observableArray更新的值。

我可以看到的主要区别是observableArray是一个“复杂类型”。我的意思是每个元素都由一个包含名称和角色的对象组成。这会有所作为吗？

有人可以帮我解决这个问题吗？

Answer 1

observableArray不会自动观察其内容：

关键点：observableArray跟踪数组中的对象，   不是那些对象的状态

简单地将一个对象放入一个observableArray并不能完全实现   该对象的属性本身是可观察的。当然可以   如果你愿意，可以观察这些属性，但那是一个   独立选择。 observableArray只跟踪它的对象   保持，并在添加或删除对象时通知侦听器。

（来自http://knockoutjs.com/documentation/observableArrays.html）

如果您更新视图模型并使name可观察，那么您的代码应该按预期方式工作：

var ViewModel = function () {
  this.item = ko.observable('Test name');

  this.items = ko.observableArray([
    { name: ko.observable('Person 1'), role: 'Sales' },
    { name: ko.observable('Person 2'), role: 'Accounts' },
    { name: ko.observable('Person 3'), role: 'Admin' }
  ]);
};

ko.applyBindings(new ViewModel());

使用foreach

1 个答案: