How to make column based element integration using

Question

Using a array, i suppose to split all them in to 5 columns.. so after the implementation i should see the 5 column appended in my html.

for that i trying this, but i think my try itself wrong.. any one correct me and help me to make 5 columns template please..?

my try:

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>

code:

    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));

in the above try, all the console works fine. but how to integrate to html?

demo here: jsfiddle

Answer 1

The returns of the $.map are being thrown away. You need to, instead, do something along these lines:

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>";
});