使用 Knockout.js 问题将元素动态添加到嵌套列表

Question

我在 mvc4 应用程序中使用 Knockout-3.2.0.js。我有一个 FieldInfo 类的列表，其中包含一个自身的列表。 FieldInfo 包含 field_id、field_name、file_name 和 list。进行一些操作后，我的操作将列表返回到视图。我在我的视图中设置了所有内容：

 @{
      var initialData = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
 }
 LineItemFields = ko.observableArray(@initialData);

Observable 数组最初是一个列表，它本身有一个列表。 在用户单击“添加”按钮之前，一切正常。我在 viewModel 中的添加按钮如下：

 addLineItem = function () {
                ko.utils.arrayForEach(ko.toJS(LineItemFields), function (item) {
                    item.LineItemValues.push({ "FieldValue": "0", "FieldID": 1})
                })
            }

LineItemFields 是有 7 个孩子的主列表（例如），这 7 个孩子每个都有一个列表，要求是向这 7 个孩子的列表中添加一个新元素。 我尝试调试，一切顺利，但它仍然没有添加新行。 以下是模板绑定：

<script id="LineItemDataTemplate" type="text/html">
        <td data-bind="foreach: $data['LineItemValues']"><input type="text" data-bind="value: FieldValue, enable: $parent.isUpdatable" class="table-column" /></td>
</script>

<table>
    <tr data-bind="template: {name: 'LineItemDataTemplate', foreach: LineItemFields}"> </tr>
</table>

Q1：内部列表是否必须像它们的父级一样是可观察的？
Q2：如果不是，addLineItem函数有什么问题？

Answer 1

由于没有最新的答案并且我得到了它的工作，所以我想发布一个答案以造福他人。我对 viewModel 进行了以下更改。

 //added the observableArray to each item in the parent list
 ko.utils.arrayForEach(LineItemFields(), function (item) {
                item.LineItemValues = ko.observableArray(item.LineItemValues);
            })

 //Removed ko.toJS(..) from LineItemFields and applied ()
 addLineItem = function () {
        ko.utils.arrayForEach(LineItemFields(), function (item) {
        item.LineItemValues.push({ "FieldValue": "0", "FieldID": 1});
    })
 }