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});
    })
 }

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

1 个答案: