Counter for handlebars #each

Question

In Handlebars, say i have a collection of names how can i do

{{#each names}}
{{position}}
{{name}}
{{/each}}

where {{position}} is 1 for the first name, 2 for the second name etc. Do I absolutely have to store the position as a key in the collection?

Answer 1

You can do this with the built-in Handlebars @index notation:

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

@index will give the (zero-based) index of each item in the given array.

Please note for people using Handlebars with the Razor view engine you must use the notation @@index to avoid compilation errors.

For more built-in helpers see http://handlebarsjs.com/

Answer 2

Handlebars.registerHelper("counter", function (index){
    return index + 1;
});

Usage:

{{#each names}}
    {{counter @index}}
    {{name}}
{{/each}}

Answer 3

While you can't do this with any native Handlebars helper, you can create your own. You can call Handlebars.registerHelper(), passing it a string with the name you want to match (position), and a function that would return the current position count. You can keep track of the position number in the closure where you call registerHelper. Here is an example of how you can register a helper called position that should work with your template example.

JavaScript:

// Using a self-invoking function just to illustrate the closure
(function() {
    // Start at 1, name this unique to anything in this closure
    var positionCounter = 1;

    Handlebars.registerHelper('position', function() {
        return positionCounter++;
    });

    // Compile/render your template here
    // It will use the helper whenever it seems position
})();

Here is a jsFiddle to demonstrate: http://jsfiddle.net/willslab/T5uKW/1/

While helpers are documented on handlebarsjs.com, this took some effort for me to figure out how to use them. Thanks for the challenge, and I hope that helps!

Answer 4

only you have to use {{@index}}

example:

{{#.}}
<li class="order{{@index}}"> counter: {{@index}}</li>
{{/.}}

Answer 5

Here is my preferred solution. Register a helper that extends the context to include your position property automatically. Then just use your new block helper (ex. #iter) instead of #each.

Handlebars.registerHelper('iter', function (context, options) {
    var ret = "";

    for (var i = 0, j = context.length; i < j; i++) {
        ret += options.fn($.extend(context[i], {position: i + 1}));
    }

    return ret;
});

Usage:

{{#iter names}}
    {{position}}
    {{name}}
{{/iter}}

adapted from http://rockycode.com/blog/handlebars-loop-index/

Answer 6

you can get value just from index inside the list.

{{#each list}}
    @index
{{/each}}

Answer 7

This works for me

<td>{{@index}}</td>