0

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

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>

现在我的把手模板中有这个：

<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 ...）

谢谢

4

3 回答 3

1

感谢您的回答，我更喜欢将逻辑处理到 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}}
于 2013-06-19T16:29:50.667 回答
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}}

这是基本的实现，但你可以做任何你需要的事情：

于 2013-06-19T14:56:47.763 回答
0

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

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

（显然不要手动创建它。）

然后循环遍历它自己的<ul>每个子数组，循环遍历每个子数组并将对象放入<li>.

说得通？

于 2013-06-19T14:59:42.867 回答