使用Knockout.js將元素動態添加到嵌套列表中

Question

我在mvc4應用程序中使用Knockout-3.2.0.js。 我有一個FieldInfo類的列表，其中包含其自身的列表。 FieldInfo包含field_id，field_name，file_name和列表。 進行一些操作后，我的操作將列表返回到視圖。 我在自己的視圖中設置了所有內容：

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

可觀察數組最初是一個具有列表本身的列表。 一切正常，直到用戶單擊“添加”按鈕。 我在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>

問題1：內部列表是否必須像其父級一樣可觀察？
問題2：如果不是，那么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});
    })
 }