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 1:

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/

Solution 2:

Top answer here is good, if you want to use last / first / index though you could use the following

Handlebars.registerHelper('times', function(n, block) {
    var accum = '';
    for(var i = 0; i < n; ++i) {
        block.data.index = i;
        block.data.first = i === 0;
        block.data.last = i === (n - 1);
        accum += block.fn(this);
    }
    return accum;
});

and

{{#times 10}}
    <span> {{@first}} {{@index}} {{@last}}</span>
{{/times}}