Question

我无法弄清楚车把的情况。我的数据如下：

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

这是基本的实现，但你可以随心所欲：

Answer 2

感谢您的回答，我更愿意将逻辑处理为Handlebar Helper。我设法做到了，这是代码：

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

模板：

{{#list items}}
     <li>{{name}}</li>
  {{/list}}

Answer 3

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

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

（显然不要手动创建。）

然后遍历它自己的<ul>中的每个子数组，并遍历每个子数组并将对象放在<li>中。

有道理吗？

车把每个都有数量

3 个答案: