Question

I have a product block in a template like this :

<script type="text/x-handlebars-template" id="tmpl-person">
    <div class="product">
       <!-- Product details here -->
    </div>
</script>

What I want to do is if from the array of person I get as data , after every three persons , I want to insert a container called <div class="row-fluid"></div> and three persons inside it.. then a row-fluid container and three persons inside it. How can I achieve this using helpers ? Thanks for help.

Answer 1

You could use something like this

Handlebars.registerHelper('each', function(context, block) {
  var ret = "";

  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + "<li>" + block(context[i]) + "</li>";
  }

if( i % 3 == 0)
   ret = ret + <div class="row-fluid"></div>

  return ret;
});

And you could define your custom iterator like following

<script type="text/x-handlebars-template" id="tmpl-person">
    {{#each productInfo}}
    <div class="product">
       <!-- Product details here -->
    </div>
    {{/each}}
</script>