javascript - handlebars.js #each 数组。使用第一项作为标题？

Question

我有以下数据:

var test = [];
test.push({typ: 'a', name="bur"});
test.push({typ: 'a', name="fur"});
test.push({typ: 'b', name="kok"});
test.push({typ: 'b', name="bur"});

我使用handlebars.js 渲染它，并在此模板中使用它:

{{#each .}}
  <div>
  <div>{{ name }}</div>
  </div> 
{{/each}}

效果很好，但我想将“typ”作为标题，如下所示:

<div class="head">a</div>
<div class="name">bur</div>
<div class="name">fur</div>
<div class="head">b</div>
<div class="name">kok</div>
<div class="name">bur</div>

但是我该怎么做呢？

Answer 1

为什么不变换你的对象并这样做:

JS:

var postProcessed = {};

test.forEach(function(val){ //Look for support of forEach you can just use for loop for older browser support if you are running this on the browser (Node should be fine).
    postProcessed[val.typ] = postProcessed[val.typ] || [];
    postProcessed[val.typ].push(val.name);
});
//{"a":["bur","fur"],"b":["kok","bur"]} 

模板:

{{#each .}}
     <div class="head">{{ @key }}</div>
     {{#each .}}
          <div class="name">{{ this }}</div>
     {{/each}}
{{/each}}

<强> Demo

您不能在 Handlebars 中做太多事情(尽管您有 Handlebars 助手并添加您自己的助手)。我建议您尝试调整模式和模板，并且主要以一对一的方式进行调整。