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

Question

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

使用下面列出的示例代码，我们看到绑定适用于简单数据，但不适用于 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/绑定：

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

我错过了什么吗？

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

如果不是，使用这个例子......我们如何使用 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