数据绑定嵌套 JSON 与 Knockoutjs答案

【问题标题】：Data binding nested JSON with Knockoutjs数据绑定嵌套 JSON 与 Knockoutjs
【发布时间】：2012-02-23 16:42:45
【问题描述】：

我有一个包含数组数组的 JSON 结构。我有一个视图模型，它使用包含可观察数据的可观察数组定义对象，然后将这些对象嵌套在其他数组和可观察对象中。

加载包含可观察数据的嵌套可观察数组的视图模型的最简单方法是什么？

示例： http://jsfiddle.net/uyQb6/1/

【问题讨论】：

标签： knockout.js javascript-framework knockout-mapping-plugin

【解决方案1】：

您可以探索使用映射插件，但选项对象会变得复杂，因为每个创建回调都必须再次调用映射插件，然后添加任何dependentObservables，并且将所有属性设为可观察对象会更容易。

您可以坚持使用您的构造函数并使用 ko.utils.arrayMap 之类的东西，这只是一个简单的函数，它遍历一个数组并将每个项目重新映射到您从您提供的函数返回的任何内容。

这是添加了 ko.utils.arrayMap 调用的示例： http://jsfiddle.net/rniemeyer/VUfSS/

【讨论】：

是的，在您的博客knockmeout.net 上找到this post 后，我开始走这条路，但我不知道是否有更好的方法。谢谢！

【解决方案2】：

更新：如果您的嵌套列表依赖于主列表，这是您的解决方案，否则 @rp-niemeyer 解决方案是最好的。

如果我没记错的话，假设你有这样的 JSON 数据：

{
    appId: 1,
    appName: 'my app 1',
    modules:[
        {module1:1, moduleName: 'module 1'}, {module1:2, moduleName: 'module 2'}]
},
{
    appId: 2,
    appName: 'my app2',
    modules:[
        {module1:3, moduleName: 'module 3'}, {module1:4, moduleName: 'module 4'}]
}

这将是你的 viewModel：

function myViewModel(){
    var self = this;
    self.appList = ko.observableArray(data);
    self.moduleList = ko.observableArray([]);

    // Set selectedApp in order to fill modulesList
    self.selectedApp = ko.observable();
    self.selectedApp.subscribe(function(v){
        // updates module list whenever selected app gets value.
        moduleList(v.modules);
    });
}

我没有测试它，但我相信你已经明白了。

【讨论】：