0

我对淘汰赛映射有疑问。我正在使用敲除映射插件来表示以 JSON 序列化的表单。它在使用剔除映射之前工作，但我需要使用剔除映射，因为我希望我的属性是可观察的。

你可以在这里看到工作的 html：http: //jsfiddle.net/etiennenoel/wG9SZ

这是我不工作的javascript代码：

var formData = 
    {"data": 
        [
            {
            "groupName" : "Properties",
            "content" : 
            [
                {
                    "title" : "Calculation Method",
                    "formType" : "select",
                    "value" : 
                    [
                        {
                            "title" : "Voltage Drop - Unbalanced",
                            "selected" : true
                        },
                        {
                            "title" : "Voltage Drop - Balanced"
                        }
                    ]
                },

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

                {
                    "title" : "Calculation Options",
                    "formType" : "radio",
                    "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" : true
                        },
                        {
                            "title" : "Voltage Drop - Balanced"
                        }
                    ]
                },

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

                {
                    "title" : "Calculation Options",
                    "formType" : "radio",
                    "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"    
                }
            ]
            }
        ]
    };  
ko.mapping.fromJS(formData);

这是相同代码的 jsfiddle：http: //jsfiddle.net/etiennenoel/wG9SZ/3/

使用映射和不使用映射之间有什么问题？

4

3 回答 3

1

我不知道您的情况是否属于这种情况，但值得一帖。

当我有一个带有嵌套属性或列表的更复杂的视图模型时，我遇到了映射插件的问题。事实证明，在映射到已经构建的视图模型之后，子对象不再是可观察的。有了这个问题，对我来说，这段代码有效，我在某个地方找到了（不幸的是我已经真的不知道在哪里）。在映射到该视图模型后，我为我的视图模型调用了此函数。

function makeAllObservables(observable) {
    // Loop through its children
    for (var child in observable()) {
        // If this child is not an observable and is an object
        if ((!ko.isObservable(observable()[child])) && (typeof observable()[child] === "object")) {
            // Make it an observable
            observable()[child] = ko.observable(observable()[child]);
            // Make all of its children observables
            makeAllObservables(observable()[child]);
        }
    }
};

用法（从服务器响应更新模型时，第一行不应该在那里）：

var model = ko.observable({});
ko.mapping.fromJS(myJSObject, {}, model);
makeAllObservables(model);
ko.applyBindings(model);

例如，当您想使用来自服务器的新 JSON 数据更新您的视图模型时，我将映射到已构建的视图模型。在那种情况下，我丢失了没有上面代码的嵌套绑定。

更新：我找到了从这里借用该技术的来源。请注意，我在那篇文章中稍微修改了该代码，因为不知何故这对我不起作用。

于 2013-06-20T20:05:24.350 回答
1

在第二种情况下，您忘记了 ApplyBindings。

ko.applyBindings(formData);
于 2013-06-20T20:04:46.690 回答
1

您需要将映射的视图模型绑定到视图：

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

由于现在一切都是可观察的，因此需要更改视图中的逻辑以使用方法语法：

<!-- ko if: $data.formType() === "select" -->

要获得要显示的选项，您需要告诉 knockout 对象上的属性名称是什么：

<select data-bind="options: $data.value, optionsText: 'title'"></select>

于 2013-06-20T20:15:33.093 回答