KnockoutJS：嵌套的 observableArrays 和嵌套的 ForEach答案

【问题标题】：KnockoutJS: Nested observableArrays and Nested ForEachKnockoutJS：嵌套的 observableArrays 和嵌套的 ForEach
【发布时间】：2015-11-17 19:29:21
【问题描述】：

免责声明-我担心这个问题可能是重复的，因为功能看起来很基本，所以我知道我可能会得到一个欺骗。但我找不到有效的解决方案

所以我有一个可观察的数组设置如下

self.meetingAttendees = ko.observableArray([
    {
        AttendeeTypeId: ko.observable(1),
        AttendeeNames: ko.observableArray([
            { Name: ko.observable("Nemo"), CurrentEdit: ko.observable(0) }
        ]),
        AttendeeSiteNumber: ko.observable(""),
        StudentNames: ko.observableArray([
            { Name: ko.observable("Flava Flave"), CurrentEdit: ko.observable(1) }
        ]),
        Email: ko.observable(""),
        Telephone: ko.observable("")
    }]);

而我的“问题”HTML 是：

<tbody data-bind="foreach: $root.meetingAttendees">
    <tr>
        <td class="attendeeNameCol textAlignCenter">
            <div class="textAlignCenter" data-bind="foreach:{data: AttendeeNames, as: 'Attendee'}">
                 <input class="formInput" data-bind="textInput: Attendee.Name()"/>
                 <span class="glyphicon glyphicon-remove nameRemove" data-bind="click:$root.removeName.bind($data,$index(),'AttendeeNames',$parentContext.$index())"></span>
            </div>
            <span data-bind="visible:$root.meetingAttendees()[$index()].AttendeeTypeId() == 1,click:$root.addName.bind($data,$index(),'AttendeeNames',$index())" class="addAnotherText">(+) Add Another Parent</span>
         </td>
    </tr>
</tbody>

一切似乎都工作正常，并且使用虚拟数据，它可以正确绑定。但是，当我将一个元素推入 AttendeeNames

self.meetingAttendees()[parentIndex].AttendeeNames().push( {Name: ko.observable(""),CurrentEdit: ko.observable(1)} );

我的视图没有插入另一个元素。我检查了数组，它确实显示了一个元素已被添加，所以我认为这是一个绑定问题。

我的问题是如何正确绑定，以便嵌套的 foreach 语句正确更新和显示嵌套 observableArrays 中的信息？

【问题讨论】：

标签： javascript knockout.js foreach

【解决方案1】：

所以，AttendeeNames 是一个可淘汰的可观察数组。如果你对它执行 console.log，你会注意到你得到的是一个函数而不是一个数组。这个变量实际上可以有两种使用方式。

如果您将其称为AttendeeNames()，您将获得没有任何淘汰功能的底层数组。所以你可以随心所欲地修改这个底层数组，然后打印出来，看起来数据正在改变，但你的视图不会更新，因为敲除无法知道这些变化。您可以使用 AttendeeNames.valueHasMutated() 手动通知 observable 此更改。注意它是如何使用 Knockout 功能的 - 在 AttendeeNames 之后没有 ()。有时，如果您认为自己可能会进行大量更改，并且出于性能原因不想在一切完成之前更新视图，这可能会很有用。

当您调用AttendeeNames.push() 时，您实际上是在使用剔除功能，它将项目添加到底层数组并通知视图它需要更新。

回顾：

以下sn-ps具有相同的功能：

AttendeeNames.push(item);

AttendeeNames().push(item);
AttendeeNames.valueHasMutated();

通过使用() 访问可观察到的淘汰赛，您将绕过所有淘汰赛并获得封装的 Javascript 值。

【讨论】：

【解决方案2】：

答案太简单了。

self.meetingAttendees()[parentIndex].AttendeeNames().push(
    {Name: ko.observable(""),CurrentEdit: ko.observable(1)}
);

不推入数组。

我不应该使用 AttendeeNames().push()

必须是 AttendeeNames.push()

我在绑定上犯了同样的错误。我正在做 Attendee.Name() 而不是应该做的 Attendee.Name。

如果有人想描述为什么会发生这种情况，我会接受他们的回答，因为我不知道为什么会这样的确切逻辑。

【讨论】：