KnockoutJS：嵌套的observableArrays和嵌套的ForEach

Question

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

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

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中显示信息？

Answer 1

:(

答案太简单了。

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

不推入阵列。

我不应该使用AttendeeNames（）。push（）

它必须是AttendeeNames.push（）

我在装订上犯了同样的错误。 我正在做Attendee.Name（）而不是我应该做的Attendee.Name。

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

Answer 2

因此， AttendeeNames是一个可观察到的数组。 如果在console.log上进行操作，则会注意到您获得的是函数而不是数组。 该变量实际上可以以两种方式使用。

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

当您调用AttendeeNames.push() ，实际上是在使用敲除功能，该功能将项目添加到基础数组中， 并通知视图需要更新。

概括：

以下片段具有相同的功能：

AttendeeNames.push(item);

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

通过使用()访问可观察的基因剔除，您将绕过所有基因剔除的内容，并获取封装的Javascript值。