遍历 Handlebars 的对象？ [复制]答案

【问题标题】：Iterate over an object for Handlebars? [duplicate]遍历 Handlebars 的对象？ [复制]
【发布时间】：2012-09-07 01:07:41
【问题描述】：

所以这是我的数据的一般要点（复制了 chrome webkit 检查器的外观）。

> Object
  > Fruit: Array[2]
    > 0: Object
       name: "banana"
       color: "yellow"
       animalthateats: "monkey"
       id: 39480
    > 1: Object
    length: 2
  > Vegetables: Array[179]
  > Dairy: Array[2]
  > Meat: Array[3]
  > __proto__: Object

这就是我想做的（一般来说）：

<select>
  <option value="">All Shows (default)</option>
  <optgroup label="Fruit">
    <option value="39480">Banana</option>
    <option value="43432">Strawberry</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="3432">Broccoli</option>
  </optgroup>
</select>

我对整个模板化的东西有点陌生，而且它肯定看起来不太容易完成......如果我可以使用 jQuery 也可以，但最好只使用这个设置。

【问题讨论】：

标签： javascript jquery templates handlebars.js mustache

【解决方案1】：

只使用“这个”

`<script id="some-template" type="text/x-handlebars-template">
<option value="none">Selec</option>
{{#each data}}
    <optgroup label="{{@key}}">
    {{#each this}}
        <option value="{{id}}">{{name}}</option>
    {{/each}}
    </optgroup>
{{/each}}
</script>`

http://jsfiddle.net/rcondori/jfav4o6u/

【讨论】：

不错。我不知道你可以这样做{{#each this}}

【解决方案2】：

您当前的数据格式给您带来了两个问题：

Handlebars 确实想要迭代数组，而不是对象。
JavaScript 对象没有可靠的顺序。

如果您可以将数据重新排列为嵌套数组，您将会有更好的运气，如下所示：

var foods  = { /* what you already have */ };
var for_hb = [
        { name: 'Fruit',      foods: foods.Fruit },
        { name: 'Vegetables', foods: foods.Vegetables },
        //...
];

你可以用这样简单的东西来做到这一点：

var for_hb = [ ];
for(var k in foods)
    for_hb.push({name: k, foods: foods[k]});
for_hb.sort(function(a, b) {
    a = a.name.toLowerCase();
    b = b.name.toLowerCase();
    return a < b ? -1
         : a > b ? +1
         :          0;
});

var html = compiled_template({ groups: for_hb });

那么你的模板很简单：

<select>
  <option value="">All Shows (default)</option>
  {{#each group}}
    <optgroup label="{{name}}">
    {{#each foods}}
      <option value="{{id}}">{{name}}</option>
    {{/each}}
  {{/each}}
</select>

您可以编写一个帮助程序来迭代一个对象，但如果您想确定一个合理的显示顺序，您仍然必须指定数组中的键。

【讨论】：

好答案。我仍然是真正使用 Javascript 构建应用程序的新手......而且我无法理解如何用数组组织数据......我从来没有想过只是简单地放 'name:'，然后在此基础上进行迭代。
我也喜欢你如何创建一个对象并分配另一个对象......我想知道这个......就像我如何循环一个没有名字的数组......所以你只是抛出它在一个对象内，所以你可以给它一个名字......聪明。

【解决方案3】：

您可以通过自定义组件执行此操作，请参见示例，我们的默认 {{each}} 助手不支持此操作（这是有意的）。

样本数据：

a = {a:'muhammad', b :'asif', c: 'javed', username: 'maxifjaved'}

**

迭代抛出对象的在线演示

http://emberjs.jsbin.com/yuheke/1/edit?html,js,output

**

【讨论】：

【解决方案4】：

我更喜欢留胡子：-{)

但从这里的文档看来，这种事情可以做到：

<select>
  <option value="">All Shows (default)</option>
  <optgroup label="Fruit">
    {{#each Fruit}}
    <option value="{{id}}">{{name}}</option>
    {{/each}}
  </optgroup>
  <!-- repeat for others-->
</select>

【讨论】：

...您不仅对 Fruit 的 optgroup 进行了硬编码，而且还手动为循环指定了 Fruit...我想为每种食物类型创建一个 optgroup，然后在这些 optgroup 中为他们各自的食物。
只嵌套 mu 提到的循环。

【解决方案5】：

至于 Handlebars-only 解决方案，我已经实现了这个逻辑：

{{#each Listings}} 

<a href="javascript:void(0)" title="" ><img src="    {{DefaultImage}}" alt=" {{Make}} {{Model}}" /> </a>

【讨论】：