Javascript 每个车把上都有计数

我想不出有把手的箱子。 我的数据如下所示：

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

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

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

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

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

福
酒吧
培根


汉堡

现在，我的车把模板中有：

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

{{{#每项}
{{name}}

{{/每个}}

因此，我最终得出以下结论：

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

福
酒吧
培根
汉堡

我需要创建一个助手吗？如何创建它？类似于扩展默认的#each helper并在每次X迭代中添加额外的dom元素（例如0、3、6、9…）

---

谢谢

您需要创建一个自定义帮助程序：

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

{{#separateList arr}
{{content}}
{{/separateList}}

这是基本的实现，但您可以根据需要：

---

将items数组划分为子数组，每个子数组包含三个对象，我们称之为itemsThree。他喜欢这样：

itemsThree = [
    [
        {
            name : "foo"
        },
        {
            name : "bar"
        },
        {
            name : "bacon"
        } 
    ], 
    [
        {
            name: "burger"
        }
    ]
];

（显然，不要手动创建此项。）

然后循环遍历它自己的

中的每个子数组，然后循环遍历每个子数组并将对象放入

中

---

有意义吗？

谢谢你的回答，我更喜欢用把手助手来处理逻辑。我设法做到了，下面是代码：

Handlebars.registerHelper('list', function(context, options) {

var ret = "",
  listLength = 3,
  u = 0;

for(var i=0, j=context.length; i<j; i++) {

if( i % listLength === 0  ) {
    u = 0;
    ret += '<ul>';
}

ret +=  options.fn(context[i]);

if( u === listLength - 1 ) { // Zero indexed
    ret +='</ul>';
}

u++;
}

return ret;
});

handlebar.registerHelper（'list'，函数（上下文，选项）{
var ret=“”，
listLength=3，
u=0；
对于（var i=0，j=context.length；i