每个都带有把手的手柄

我无法弄清楚带把手的情况。我的数据是这样的：每个都带有把手的手柄

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助手和增加一个额外的DOM元素每个X迭代（如0，3，6，9 ...）

感谢

来源

2013-06-19 arlg

感谢您的回答，我更愿意将逻辑处理成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-19 16:29:50 arlg

你需要创建一个自定义帮助：

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-19 14:56:47

鸿沟项目阵列到各含三个对象的子阵列，让我们称之为itemsThree。喜欢这样的：

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

（不要手动明显创建此。）

然后遍历每个子阵列在它自己的<ul>，并遍历每个子阵，把对象<li>。

有意义吗？

来源

2013-06-19 14:59:42

每个都带有把手的手柄

回答

相关问题