javascript - knockout - 映射数组

Question

首先，我有一个 JSFiddle 准确地表示我需要完成的结果并且它有效:http://jsfiddle.net/etiennenoel/wG9SZ/

但是，我需要它将这个代码结构集成到一个已经有多个绑定(bind)的更大的项目中，因此我不能像以前的 JSFiddle 那样只绑定(bind)到一个数组。

因此，我需要映射我的 JSON 对象，但此对象必须位于函数或 View 模型中。

通常，我的 html 应该保持不变或接近。

这是我尝试执行的 js 代码:

function appViewModel() {
    var self = this;
    self.formData = ko.observableArray();
    self.formData.push({"data": 
        [
            {
            "groupName" : "Properties",
            "content" : 
            [
                {
                    "title" : "Calculation Method",
                    "formType" : "select",
                    "selected" : "2",
                    "value" : 
                    [
                        {
                            "title" : "Voltage Drop - Unbalanced",
                            "value" : "1"
                        },
                        {
                            "title" : "Voltage Drop - Balanced",
                            "value" : "2"
                        }
                    ]
                },

                {
                    "title" : "Tolerance (% V)",
                    "formType" : "textBox",
                    "value" : 0.01
                },

                {
                    "title" : "Calculation Options",
                    "formType" : "checkbox",
                    "value" : 
                    [ 
                        {
                            "title" : "Flat Start (at Nominal Conditions",
                            "checked" : false
                        } ,
                        {
                            "title" : "Assume Line Transposition",
                            "checked" : true
                        }
                    ]
                },

                {
                    "title" : "Adjust Conductor Resistance at",
                    "formType" : "textBox",
                    "disabled" : true,
                    "value" : 77,
                    "appendLabel" : true,
                    "appendLabelText" : "°F"    
                }
            ]
            },
            {
            "groupName" : "Properties",
            "content" : 
            [
                {
                    "title" : "Calculation Method",
                    "formType" : "select",
                    "value" : 
                    [
                        {
                            "title" : "Voltage Drop - Unbalanced",
                            "selected" : false

                        },
                        {
                            "title" : "Voltage Drop - Balanced",
                            "selected" : true
                        }
                    ]
                },

                {
                    "title" : "Tolerance (% V)",
                    "formType" : "textBox",
                    "value" : 0.01
                },

                {
                    "title" : "Calculation Options",
                    "formType" : "checkbox",
                    "value" : 
                    [ 
                        {
                            "title" : "Flat Start (at Nominal Conditions",
                            "checked" : false
                        } ,
                        {
                            "title" : "Assume Line Transposition",
                            "checked" : true
                        }
                    ]
                },

                {
                    "title" : "Adjust Conductor Resistance at",
                    "formType" : "textBox",
                    "disabled" : true,
                    "value" : 77,
                    "appendLabel" : true,
                    "appendLabelText" : "°F"    
                }
            ]
            }
        ]
    });  
}

var viewModel = new appViewModel()

ko.mapping.fromJS(viewModel.formData)
ko.applyBindings(viewModel);

此代码也可在此处获得:http://jsfiddle.net/etiennenoel/wG9SZ/23/

现在，它不起作用，我不知道为什么。我真的需要将我的 formData 放在一个函数中。问题是文档没有谈到做那样的事情......

有办法吗？

如果不是，有没有办法让knockout同时绑定(bind)到一个函数和一个变量？

Answer 1

你只忘记了一个绑定(bind)级别:

<div data-bind="foreach: formData">
    <div data-bind="foreach: data"> <!-- missing -->
         <h1 data-bind="text: $data.groupName"></h1>

See fiddle