Knockout映射确实代表了期望的html

Question

我有一个敲除映射的问题。我使用击倒映射插件来表示在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);

下面是相同代码的示例:http://jsfiddle.net/etiennenoel/wG9SZ/3/

使用映射和不使用映射之间的问题是什么?

Answer 1

第二种情况你忘了ApplyBindings

ko.applyBindings(formData);

Answer 2

我不知道你的情况是否如此，但这值得一贴。

我有映射插件的问题，当我有一个更复杂的视图模型嵌套属性或列表。结果是，在映射到已经构造的视图模型之后，子对象不再是可观察对象。有了这个问题，对我来说，这段代码工作了，我在某个地方发现了什么(不幸的是，我已经不知道在哪里)。在映射到视图模型之后，我调用了这个函数。

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数据更新视图模型时。在这种情况下，如果没有上面的代码，我就丢失了嵌套绑定。

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

Answer 3

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

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

，因为现在所有东西都是一个可观察对象，所以视图中的逻辑需要更改为使用方法语法:

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

要获得要显示的选项，您需要告诉knockout对象的属性名称:

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