淘汰赛：对象和foreach答案

【问题标题】：Knockout: objects and foreach淘汰赛：对象和foreach
【发布时间】：2014-01-30 06:45:24
【问题描述】：

如果我有以下对象（例如，从 JSON 文件中提取）：

{
   "groups": [
       {
           "name":"groupa",
           "shirts":[
               {
                   "name":"foo1", "color": "blue",  "size": "small"
               },
               {
                   "name":"foo2", "color": "green",  "size": "large"
               },
               {
                   "name":"foo3", "color": "red",  "size": "medium"
               }
           ]
       },

       {
           "name":"groupb",
           "shirts":[
               {
                   "name":"foo1", "color": "blue",  "size": "x-large"
               },
               {
                   "name":"foo2", "color": "purple",  "size": "large"
               },
               {
                   "name":"foo3", "color": "pink",  "size": "xx-large"
               }
           ]
       }
   ]
}

我了解如何使用 observableArrays，它包含来自单个对象的正确映射数据。但是如果我需要一个observableArray 来包含来自多个对象的数据怎么办？

输出可能类似于以下：

<div>
    <h2>groupa</h2>
        <h3>foo1 - large blue</h3>
        <h3>foo2 - small red</h3>

    <hr />

    <h2>groupb</h2>
        <h3>bar1 - medium purple</h3>
        <h3>bar2 - x-large white</h3>

    <hr />

    <h2>groupc</h2>
        <h3>foobar1 - large black</h3>
        <h3>foobar2 - small green</h3>
</div>

我不明白，如何使用一个可观察数组来创建它？

我尝试将每个groups 分配给他们自己的observableArray，然后将组名分配给另一个数组，然后foreach 组名，然后手动遍历它们——但这似乎是一团糟。

什么是最干净、最合乎逻辑的方式？

【问题讨论】：

你的数据结构很奇怪。为什么shirts 不是一个数组？为什么每个组不是一个数组？
我更新了 JSON 的结构（现在只有两个组，纯粹是为了视觉大小）。它最初的结构是这样的，所以我可以根据对象的键进行排序，而不是潜入下一级数组。让我知道这是否可以让我更轻松地完成我对 Knockout 的要求（不过，我对此表示怀疑？）。谢谢！

标签： javascript object knockout.js mapping

【解决方案1】：

所以有一个非常明显的方法可以做到这一点，只需将observableArray 映射到包含衬衫的每个组。像这样：

function shirt_group_assign(item) {
    this.name = item.name;
    this.shirts = ko.observableArray([]);

    shirts_mapped = $.map(item.shirts, function(item) {
        return new shirt_assign(item);
    });

    this.shirts = shirts_mapped;
}

有一个工作示例here。

【讨论】：