在KnockoutJS中获取多维数组(对象)可观察

Question

我正在使用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;
    }));

最终的数组结构看起来不错,但是当我在推送到sections数组时,淘汰不会更新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);

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

如果有人有任何想法,将不胜感激.

谢谢.

UPD:使第一级和第二级可观察不成问题,问题是要深入.

以下是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> 

Answer 1

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

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

在这个例子中,我创建了一个树结构,它们允许您添加一个新条目.您可以看到我能够继续在越来越深的层次上添加没有问题,并且因为名称是可观察的,所以可以更改它们.