Question

我是使用Knockout.js的新手，刚刚使用ViewModel安装/实例化ko.mapping.js绑定，却发现我得到了部分绑定。

使用下面列出的示例代码，我们看到绑定适用于简单数据，但不适用于JSON对象中的复杂数据。这是一个Fiddle

复杂的JSON对象：

 var json = {
    "a": "A",
    "b": [{
           "b1": "B1",
           "b2": "B2",
           "b3": [{ "one": "One", "two": "Two"}]
         }],
    "c": "C"
 }

要绑定到的HTML元素：

<div data-bind="text: a"></div>
<div data-bind="text: b.b1"></div>
<div data-bind="text: c"></div>

Javascript ViewModel / binding：

var vm = {};    
vm = ko.mapping.fromJS(json);
ko.applyBindings(vm);

我错过了什么吗？

在Knockout.js中，是否可以使用knockout.mapping.js将复杂的JSON对象绑定到viewmodel？

如果不是，请使用此示例... 如何使用knockout.js 绑定此复杂JSON对象？

我能找到的最近的StackOverflow帖子就是这个帖子，Knockout mapping complex object 我已经尝试了几个小时，现在使用多种方法，并且无法成功ko.mapping.js进行此绑定。

不幸的是，Knockoutjs.com文档（http://knockoutjs.com/documentation/plugins-mapping.html）并未涵盖插件是否可以实现。

Answer 1

ko.mapping.js隐式处理简单对象和复杂对象。实际上，绑定中存在用于访问嵌套对象的问题。

如您所见，属性b是一个数组，因此ko.mapping会将其转换为observableArray.so绑定将如下所示： -

<div data-bind="text: a"></div>
<div data-bind="text: b()[0].b1"></div> //As b is array
<div data-bind="text: c"></div>

下面你可以看到映射后的对象。

{
"a": "A",
"b": [
    {
        "b1": "B1",
        "b2": "B2",
        "b3": [
            {
                "one": "One",
                "two": "Two"
            }
        ]
    }
],
"c": "C",
"__ko_mapping__": {
    "ignore": [],
    "include": [
        "_destroy"
    ],
    "copy": [],
    "observe": [],
    "mappedProperties": {
        "a": true,
        "b[0].b1": true,
        "b[0].b2": true,
        "b[0].b3[0].one": true,
        "b[0].b3[0].two": true,
        "b[0].b3": true,
        "b": true,
        "c": true
    },
    "copiedProperties": {}
}
}

Fiddle Demo

使用knockout.js绑定复杂的JSON对象

1 个答案: