Question

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

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

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

通常情况下，我的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在函数内部。问题是文档没有谈到做类似的事情......

有办法吗？

如果没有，是否有办法将淘汰赛同时绑定到某个功能和变量？

Answer 1

你只需要一个绑定级别：

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

See fiddle

Knockout - 映射数组

1 个答案: