javascript - 每个 Handlebars 都有计数

Question

我想不出有 Handlebars 的箱子。我的数据如下所示:

items : [
  {
    name : "foo"
  },
  {
    name : "bar"
  },
  {
    name : "bacon"
  },
  {
    name : "burger"
  }
]

在我的模板中，我想创建大小为 3 的列表，因此最终的 html 应如下所示:

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>bacon</li>
</ul>
<ul>
    <li>burger</li>
</ul>

现在我的 Handlebars 模板中有这个:

<ul>
{{#each items}}
 <li>{{name}}<li>
{{/each}}
</ul>

所以我最终得到这个:

<ul>
<li>foo</li>
<li>bar</li>
<li>bacon</li>
<li>burger</li>
</ul>

我需要创建一个助手吗？我怎样才能创建它？比如扩展默认的 #each 辅助函数并在每次 X 迭代中添加一个额外的 dom 元素(例如 0、3、6、9 ...)

谢谢

Answer 1

您需要创建一个自定义助手:

Handlebars.registerHelper("separateList", function( arr, options ) {
  // Here we only apply one line, but implement your separation logic in here
  return options.fn( arr[0] ); // pass a single arr item here
});

然后在您的模板中:

{{#separateList arr}}
  <li>{{content}}</li>
{{/separateList}}

这是基本实现，但您可以根据需要进行任何操作:

• http://handlebarsjs.com/#helpers
• http://handlebarsjs.com/block_helpers.html#iterators