使用 foreach 时未通知 KnockoutJS observableArray 绑定更新

Question

我有一个问题，如果我将 foreach 绑定与 observableArray 一起使用，我不会看到对 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 使用水平分隔符分成 2 个部分。在第 1 节中是一个使用可观察对象的绑定。如果您修改文本框，您会看到更改反映在下面的 span 元素中。这是有效的。

在第 2 节中是完全相同的主体，但使用 observableArray 和 foreach 绑定。例如，如果您更改“Person 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());