Question

使用数组，我想将它们全部拆分为5列..所以在实现后我应该看到我的html中附加了5列。

为此我尝试了这个，但我认为我的尝试本身是错的..任何人都纠正我并帮我制作5列模板，请...？

我的尝试：

html：

 <div id="colParent">

</div>

<script id="colMake" type="text/x-handlebars-template">

{{#moduloIf this.nations}}

        <div class="first">{{name}}</div>
<div class="first">{{name}}</div>
<div class="second">{{name}}</div>
<div class="third">{{name}}</div>
<div class="four">{{name}}</div>

{{/moduloIf}}


</script>

代码：

    var obj = {
    "nations" : [{"name":"Afrikaans"}, {"name":"Albanian"}, {"name":"Arabic"}, {"name":"Arabic (Argentina)"}, {"name":"Arabic (Bahrain)"},{"name":"Afrikaans"}, {"name":"Albanian"}, {"name":"Arabic"}, {"name":"Arabic (Argentina)"}, {"name":"Arabic (Bahrain)"},{"name":"Afrikaans"}, {"name":"Albanian"}, {"name":"Arabic"}, {"name":"Arabic (Argentina)"}, {"name":"Arabic (Bahrain)"}]
}
Handlebars.registerHelper("moduloIf", function(arr,block) {

    $.map(arr, function(val,i){
        if(i % 5 === 0){
            console.log("zero", i, val);
            return block.fn(val)
        }
        else if(i % 5 === 1){
            console.log("one", i, val);
            return block.fn(val)
        }
        else if(i % 5 === 2){
            console.log("two", i, val);
            return block.fn(val)
        }
        else if(i % 5 === 3){
            console.log("thre", i, val);
            return block.fn(val)
        }
        else if(i % 5 === 4){
            console.log("four", i, val);
            return block.fn(val)
        }

    })

}); 

var temp = Handlebars.compile($("#colMake").html());

$("#colParent").html(temp(obj));

在上面的尝试中，所有控制台都能正常工作。但如何整合到HTML？

演示：jsfiddle

Answer 1

returns的{{1}}被丢弃了。相反，你需要做这些事情：

$.map

如何使用Handlebarsjs模板进行基于列的元素集成..控制台工作但html不附加？

1 个答案: