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}}

演示

你不能在Handlebars中做太多事情（虽然你有车把助手并添加你自己的帮手）。 我建议你尝试调整你的模态和模板，主要是以一对一的方式。

Answer 2

这不是一个直接的答案，但我认为以这种方式设置CSS会更简洁：

div {
  /* Header style */
}

div ~ div {
  /* normal style */
}

Handlebars解决方案是在循环内使用特殊值{{@index}} （或对象的@key ）来访问索引并相应地设置样式。 （但这是一个很大的开销因为Handlebars逻辑较少，所以你可能需要创建一个帮助器ifEqual0或类似的......）

使用Handlebars时更干净的方法是将数组分隔为header和items ，并将其作为参数传递给模板。