迭代Handlebars的对象？

所以这是我的数据的一般要点（抄袭chrome webkit检查器的外观）。迭代Handlebars的对象？

> 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，也可以使用，但最好只使用此设置。

来源

2012-09-13 xckpd7

您当前的数据格式呈现你有两个问题：

把手真的想迭代数组而不是对象。
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>

You coul d编写一个帮助器来遍历一个对象，但是如果你想确定一个合理的显示顺序，你还是必须指定一个数组中的键。

来源

2012-09-14 03:47:02

很好的答案。我还是一个真正在构建应用程序中真正使用Javascript的新手......我无法将自己的头围绕在如何组织数据的阵列中......我从来没有想过仅仅把'name：'然后基于此进行迭代。 – xckpd7

我也喜欢你是如何创建一个对象并指定另一个对象的......我在想那个......就像我如何循环一个没有名字的数组..所以你只需将它放在一个对象中就可以了，所以你可以给它一个名字......聪明。 – xckpd7

我更胡子的男人： - {）

但是从文档在这里，它看起来像这种事情一定会做到：

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

来源

2012-09-13 23:50:35 Alex

...您不仅为Fruit的optgroup进行了硬编码，而且还手动为循环指定了Fruit ...我想为每种食物类型制作一个optgroup，然后在这些optgroup中为各自的食物制作选项。 – xckpd7

只是嵌套mu提到的循环。 – Alex

使用只是 “这个”

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

来源

2014-12-22 16:37:56 ron

不错。我不知道你可以做'{{#each this}}' –

至于车把唯一的解决办法，我已经实现了这样的逻辑：

{{#each Listings}} 

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

来源

2015-11-21 14:20:58 Asim

您可以通过自定义做到这一点组件见示例，这不支持我们的默认{{each}}帮手（这是故意的）。

样本数据：

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

在线演示了迭代抛出对象

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

来源

2016-07-14 06:38:37

迭代Handlebars的对象？

回答

相关问题