对一个对象遍历Handlebars?(复制)

This question already has an answer here:

这个问题已经有了答案:

Handlebars/Mustache - Is there a built in way to loop through the properties of an object? 7 answers
车把/小胡子——是否有一种内置的方法来循环遍历对象的属性?7的答案

So this is the general gist of my data (copied the look from chrome webkit inspector).

这就是我数据的基本要点(复制了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

And this is what I want to do (in general):

这就是我想做的(总的来说):

<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>

I'm sorta new to the whole templating thing, and it definitely seems non-straightforward to accomplish... if I can use jQuery anyway that will work too, but preferably just with this setup.

我对整个模板都很陌生，而且完成起来很不简单……如果我可以使用jQuery，那也可以，但是最好只使用这个设置。

5 个解决方案

#1

Your current data format presents you with two problems:

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

Handlebars really wants to iterate over arrays, not objects.
Handlebars确实希望遍历数组，而不是对象。
JavaScript objects have no reliable order.
JavaScript对象没有可靠的顺序。

You'll have better luck if you can rearrange your data to be nested arrays, something like this:

如果你能把数据重新排列成嵌套数组，你会有更好的运气。

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

You can do that with something simple like this:

你可以做一些简单的事情:

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 });

Then your template is simple:

那么你的模板很简单:

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

You could write a helper to iterate over an object but you'd still have to specify the keys in an array if you wanted to be sure of a sensible display order.

您可以编写一个助手来遍历一个对象，但是如果您希望确定一个合理的显示顺序，您仍然需要指定数组中的键。

#2

use just "this"

用“这”

`<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/

#3

You can do this via a custom component see example, this is not supported by our default {{each}} helper (and that is intentional).

您可以通过自定义组件来实现这一点，请参见示例，这是我们的默认{{each} helper(这是有意的)不支持的。

Sample Data:

样本数据:

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

* *

Online Demo for iterate throw an Object

迭代抛出对象的在线演示

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

http://emberjs.jsbin.com/yuheke/1/edit?html,js、输出

* *

#4

I'm more of a Mustache man :-{)

我更像个留胡子的男人:-{)

But from the docs over here it looks like this kind of thing will do it:

但从这里的文档来看，这类东西似乎可以做到:

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

#5

As far as Handlebars-only solutions, I've implemented this logic:

至于纯handlebar解决方案，我实现了以下逻辑:

{{#each Listings}} 

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

#1