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

Add elements dynamically to the nested list using Knockout.js Issue

本文关键字：添加 嵌套 列表 动态 元素 Knockout js Issue 使用      更新时间：2023-09-26

我在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);

可观察数组最初是一个列表，它本身有一个列表。在用户单击"添加"按钮之前，一切正常。我在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函数有什么问题？

由于没有最新的答案，而且我已经成功了，所以我想发布一个答案来造福他人。我对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});
    })
 }
相关文章：