handlebars.js

Iterating over basic “for” loop using Handlebars.js


I’m new to Handlebars.js and just started using it. Most of the examples are based on iterating over an object. I wanted to know how to use handlebars in basic for loop.

Example.

for(i=0 ; i<100 ; i++) {
   create li's with i as the value
}

How can this be achieved?


Solution

  • There's nothing in Handlebars for this but you can add your own helpers easily enough.

    If you just wanted to do something n times then:

    Handlebars.registerHelper('times', function(n, block) {
        var accum = '';
        for(var i = 0; i < n; ++i)
            accum += block.fn(i);
        return accum;
    });
    

    and

    {{#times 10}}
        <span>{{this}}</span>
    {{/times}}
    

    If you wanted a whole for(;;) loop, then something like this:

    Handlebars.registerHelper('for', function(from, to, incr, block) {
        var accum = '';
        for(var i = from; i < to; i += incr)
            accum += block.fn(i);
        return accum;
    });
    

    and

    {{#for 0 10 2}}
        <span>{{this}}</span>
    {{/for}}
    

    Demo: http://jsfiddle.net/ambiguous/WNbrL/