如何添加循环数组中每个3的hr元素。使用Handlebarsjs?

时间:2013-06-17 13:53:49

标签: handlebars.js

我有一个元素数组,我将它们全部附加到我的表单元素。一切正常。但我无法在我的第三个标签上添加“hr”元素..我试过了。

<script id="locale-template" type="text/x-handlebars-template">
        {{#each this}}
                {{#if @index % 3 === 0 }}
                    <hr/>
        {{/if}}
        <label><input type="checkbox" /> {{name}} </label>
        {{/each}}
    </script>

但不起作用..任何人都可以建议我正确的方法吗??

提前致谢

1 个答案:

答案 0 :(得分:10)

首先注册助手,如showHr

Handlebars.registerHelper("showHr", function(index_count,block) {

  if(parseInt(index_count)%3=== 0){
    return block.fn(this);}


});

现在在模板

{{#showHr @index}}
    <hr/>
{{/showHr}}

或者,如果您愿意,可以编写通用助手,请参阅http://doginthehat.com.au/2012/02/comparison-block-helper-for-handlebars-templates/

编辑评论问题

Handlebars.registerHelper("moduloIf", function(index_count,mod,block) {

  if(parseInt(index_count)%(mod)=== 0){
    return block.fn(this);}
});

考虑索引从0开始

// If index is 0 open div
// if index is 3 means open a div
{{#moduloIf @index 0}}
 <div>
{{/moduloIf}}
{{#moduloIf @index 3}}
 <div>
{{/moduloIf}}

 {{name}}
 // if index+1 is  modulo 3 close div
 {{#moduloIf @index+1 3}}
 </div>
 {{/moduloIf}}