在KnockoutJS中获得可观察到的多维数组(对象) [英] getting multidimensional array (object) observable in KnockoutJS

问题描述

我正在使用Knockout构建应用程序，发现它非常有用. 虽然，我在获取多维数组(对象)方面存在问题.

I am building an application with Knockout and find it very useful. Although, I have a problem with getting multidimensional array (object) observable.

此刻我正在使用以下结构:

At the moment I am using following structure:

    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 超过两个级别，我将无法正常工作. 我尝试过

It works well, but I can't get it working if the initialData is more than two levels. I tried something like

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

最终的数组结构看起来不错，但是当我执行推入节"数组时，敲除不会更新DOM:

The final array structure looks good, but knockout doesn't updates DOM when I am doing push to sections array:

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

我还尝试了一个基因敲除(mockout.mapping.js)插件(这是一种正确的方法吗?)首先看起来不错，但是在按下上述功能后，我的新字段元素却无法观察到，只是对象.

I also tried a knockout.mapping.js plugin (is that a right approach?) looks good first, but after a push in the function above I have my new field element not observable, just object.

插件的重复说明:

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

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

But I am not sure that it is my case.

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

If anyone has any ideas, it would be much appreciated.

谢谢.

UPD: 使第一级和第二级可观察性不是问题，而是要更深入.

UPD: It is not a problem to make 1st and 2nd levels observable, problem is to go deeper.

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

推荐答案

映射插件是最好的选择.它将自动将您的对象映射到observables和observableArrays中，因此您不必手动进行操作.

The mapping plugin is the best way to go. It will automatically map your objects into observables and observableArrays, so you don't have to do it manually.

这是一个简单的小提琴，可以为您提供一些指导: http://jsfiddle.net/jearles/CGh9b /

Here is a simple fiddle that may give you some pointers: http://jsfiddle.net/jearles/CGh9b/

在此示例中，我创建了树结构，它们允许您添加新条目.您可以看到，我能够毫无疑问地继续添加更深层次的内容，而且由于名称是可见的，因此可以更改.

In this example I create a tree structure and them allow you to add a new entry. You can see that I am able to continue to add at increasingly deeper levels with no problem, and because the names are observable they can be changed.

这篇关于在KnockoutJS中获得可观察到的多维数组(对象)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！