0

配列を使用して、それらすべてを 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

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 に答える