How to do column-based integration using the Handlebarsjs template .. does the console work, but html is not added?

Question

Using an array, I suggest breaking them down into 5 columns. Therefore, after implementation, I should see 5 columns added to my html.

for this I am trying to do this, but I think that my attempt is wrong myself .. someone corrects me and helps me make 5 columns of the template, please ..?

my attempt:

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 attempt, the entire console is working fine. but how to integrate into html?

here: jsfiddle

Answer 1

Discarded returns from $.map . You need to do something in this direction:

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