迭代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的對象？

回答

相關問題