2

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

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

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

通常，我的 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在一个函数里面。问题是文档没有谈论做这样的事情......

有没有办法做到这一点 ？

如果没有，是否有办法将淘汰赛同时绑定到函数和变量？

4

1 回答 1

3

你只需要一个绑定级别：

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

见小提琴

于 2013-06-28T13:26:05.900 回答