0

使用数组，我想将它们分成 5 列。所以在实现之后，我应该看到 5 列附加在我的 html 中。

为此我尝试了这个，但我认为我的尝试本身是错误的..任何人纠正我并帮助我制作 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

4

1 回答 1

0

的returns被$.map扔掉了。相反，您需要按照以下方式做一些事情：

Handlebars.registerHelper('moduloIf', function(items, options) {
  var out = "<ul><ul class='row'>";

  for(var i=0, l=items.length; i<l; i++) {  
    if( i % 5 == 0 && i > 0 ) out += "</ul><ul class='row'>";
    out += out + "<li>" + options.fn(items[i]) + "</li>";
  }

  return out + "</ul>";
});
于 2013-07-15T08:50:03.680 回答