0

我有一个对象，其中包含 15 个数据，我决定将它们放入 3 列，我使用辅助函数将它们分成 3 组，最后返回一个新对象。在我返回对象后，我使用 if 条件来操作元素..

谁能告诉我我做错了什么或告诉我正确的方法..？

这是html部分：

<div id="columns"></div>

 <script id="navi-template" type="text/x-handlebars-template">
        {{#colMaker this}}
            {{#if this.f}}
                <div class="col0">{{name}}</div>
            {{/if}}
            {{#if this.s}}
                <div class="col1">{{name}}</div>
            {{/if}}
            {{#if this.t}}
                <div class="col2">{{name}}</div>
            {{/if}}
        {{/colMaker}}
</script>

临时部分作品：

var obj = {
    "columns":[ {"name":"name1"},{"name":"name2"},{"name":"name3"},{"name":"name4"},{"name":"name5"},{"name":"name6"},
        {"name":"name7"},{"name":"name8"},{"name":"name9"},{"name":"name10"},{"name":"name11"},{"name":"name12"},
        {"name":"name13"},{"name":"name14"},{"name":"name15"}
    ]
}



Handlebars.registerHelper("colMaker", function(arr, options, context){

    var fn = options.fn, ret = "";

    for(i=0;i<arr.length;i++){
        if(i % 3 == 0){
            ret += fn({"f":"f","name" : arr[i].name});
        }else if(i % 3 == 1){
            ret += fn({"s":"s","name" : arr[i].name});
        }else if(i % 3 == 2){
            ret += fn({"t":"t","name" : arr[i].name});
        }
    }

    return ret;

})

var temp = Handlebars.compile($("#navi-template").html());
$("#columns").html(temp(obj.columns));

我喜欢将元素部分保留在 html 文档中而不是循环中的方式。提前致谢。

现场演示

4

0 回答 0