在 KnockoutJS 中获取可观察的多维数组（对象）答案

【问题标题】：getting multidimensional array (object) observable in KnockoutJS在 KnockoutJS 中获取可观察的多维数组（对象）
【发布时间】：2012-06-02 04:16:03
【问题描述】：

我正在使用 Knockout 构建一个应用程序，发现它非常有用。虽然，我在获取可观察的多维数组（对象）时遇到了问题。

目前我正在使用以下结构：

    self.form = ko.observableArray(ko.utils.arrayMap(initialData, function(section) {
        var result = { 
            name : section.name, 
            code : section.code, 
            type : section.type, 
            fields: ko.observableArray(section.fields) 
        };
        return result;
    }));

它运作良好，但如果 initialData 超过两个级别，我无法让它运作。我尝试了类似

    self.form = ko.observableArray(ko.utils.arrayMap(initialData, function(block) {
        var result = { 
            name : block.name, 
            code : block.code, 
            type : block.type, 
            sections: ko.observableArray(ko.utils.arrayMap(block.sections, function(section) {
                var result = { 
                    name : section.name, 
                    code : section.code, 
                    type : section.type, 
                    fields: ko.observableArray(section.fields) 
                };
                return result;
            }))
        };
        return result;
    }));

最终的数组结构看起来不错，但是当我推送到节数组时，knockout 不会更新 DOM：

    self.addField = function( section ) {
        field = {
            code: uid(),
            name: "New Field",
            value: '',
            type: section.type
        };
        section.fields.push(field); 
    };

我还尝试了一个 knockout.mapping.js 插件（这是一种正确的方法吗？）首先看起来不错，但是在推入上面的函数之后，我的新字段元素不可观察，只是对象。

插件文档说：

// Every time data is received from the server:
ko.mapping.fromJS(data, viewModel);

但我不确定这是不是我的情况。

如果有人有任何想法，将不胜感激。

谢谢。

更新：让第 1 层和第 2 层可观察不是问题，问题是要更深入。

以下是 initialData 的示例：

var blocks = [
    {
        "name" : "",
        "sections" : [
            {
                "name" : "Section 1",
                "fields" : [
                    {
                        "name" : "Field A",
                        "type" : "checkbox",
                        "code" : uid()
                    }
                ]
            }
        ]
    }
];

HTML

<div data-bind='template: { name: tpl-form-field-checkbox, foreach: fields }'></div>
<button class="btn addField" data-bind="click: $root.addField">Add</button>

<script type="text/html" id="tpl-form-field-checkbox">
    <input type="text" name="" value="<%= name %>" /> <br/>
</script>

【问题讨论】：

如果可能的话，看看initialData的例子会很有帮助。
另外，您能否发布您的 HTML 数据绑定的摘录？
我已经更新了问题，谢谢。
如果你想让你的新字段名是可观察的，你必须使用 ko.observable('New Field') 使它可观察。仅将对象添加到 observableArray 不会使该对象（或其属性）可观察。
谢谢约翰，我现在明白了。我正在使用映射插件，我意识到我需要忽略 JS 对象的一些属性（不映射它们）。

标签： knockout.js knockout-2.0 knockout-mapping-plugin

【解决方案1】：

映射插件是最好的方法。它会自动将您的对象映射到 observables 和 observableArrays，因此您不必手动进行。

这是一个简单的小提琴，可能会给你一些指示：http://jsfiddle.net/jearles/CGh9b/

在此示例中，我创建了一个树结构，它们允许您添加新条目。您可以看到，我可以毫无问题地继续在越来越深的层次上添加，并且由于名称是可观察的，因此可以更改。

【讨论】：