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中做太多事情（虽然你有车把助手并添加你自己的帮手）。我建议你尝试调整你的模态和模板，主要是以一对一的方式。

Answer 2

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

div {
  /* Header style */
}

div ~ div {
  /* normal style */
}

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

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

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

2 个答案: