javascript - 使用 knockout.js 绑定(bind)复杂的 JSON 对象

Question

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

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

复杂的 JSON 对象:

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

要绑定(bind)到的 HTML 元素:

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

Javascript ViewModel/绑定(bind):

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

我错过了什么吗？

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

如果没有，使用这个例子...我们如何使用knockout.js绑定(bind)这个复杂的JSON对象？

我能找到的最接近的现有 StackOverflow 帖子是这个，Knockout mapping complex object 我已经尝试了几个小时，使用多种方法，但未能成功使用 ko.mapping.js 进行此绑定(bind)。

不幸的是，Knockoutjs.com 文档 ( http://knockoutjs.com/documentation/plugins-mapping.html ) 没有涵盖该插件是否可以实现这一点。

Answer 1

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

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

<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