Javascript 遍历 Handlebars 的对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12414834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iterate over an object for Handlebars?
提问by Rey
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.
我对整个模板化的东西有点陌生，而且完成起来似乎并不简单......
采纳答案by mu is too short
Your current data format presents you with two problems:
您当前的数据格式给您带来了两个问题：
- Handlebars really wants to iterate over arrays, not objects.
- JavaScript objects have no reliable order.
- Handlebars 真的想遍历数组，而不是对象。
- 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.
您可以编写一个助手来迭代一个对象，但如果您想确定一个合理的显示顺序，您仍然必须在数组中指定键。
回答by ron
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>`
回答by Muhammad Asif Javed
You can do this via a custom component see example, this is not supported by our default {{each}}helper (and that is intentional).
您可以通过自定义组件执行此操作，请参见示例，我们的默认{{each}}助手不支持此操作（这是有意为之）。
Sample Data:
样本数据：
a = {a:'muhammad', b :'asif', c: 'javed', username: 'maxifjaved'}
**
**
Online Demo for iterate throw an Object
迭代抛出对象的在线演示
**
**
回答by Asim
As far as Handlebars-only solutions, I've implemented this logic:
至于 Handlebars-only 解决方案，我已经实现了这个逻辑：
{{#each Listings}}
<a href="javascript:void(0)" title="" ><img src=" {{DefaultImage}}" alt=" {{Make}} {{Model}}" /> </a>
回答by Alex
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>
