迭代Handlebars的对象?

时间:2012-09-13 21:10:06

标签: javascript jquery templates handlebars.js mustache

所以这是我数据的一般要点(复制了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,那么它也可以工作,但最好只使用这个设置。

5 个答案:

答案 0 :(得分:11)

您当前的数据格式会出现两个问题:

  1. Handlebars真的想迭代数组,而不是对象。
  2. JavaScript对象没有可靠的顺序。
  3. 如果您可以将数据重新排列为嵌套数组,那么您将获得更好的运气,如下所示:

    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>
    

    你可以编写一个帮助器来迭代一个对象,但如果你想确定一个合理的显示顺序,你仍然需要在数组中指定键。

答案 1 :(得分:11)

只使用“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/

答案 2 :(得分:1)

您可以通过自定义组件执行此操作,请参阅示例,我们的默认{{each}}帮助程序不支持此操作(这是故意的)。

示例数据:

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

**

  

迭代的在线演示抛出一个对象

     

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

**

答案 3 :(得分:0)

我更像是一个小胡子男人: - {)

但是从这里的文档看起来这样的事情会发生:

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

答案 4 :(得分:0)

就Handlebars-only解决方案而言,我实现了这个逻辑:

.