How to get position of each element in a collection using handlebar - handlebars.js

Question

If I have something like :
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}
How do I get the position of each of the values in handlebar?
{{#each people}}
{{this}}
<!--{{this.position}} -->
{{/each}}
I expect the answer to be
Yehuda Katz
0
Alan Johnson
1
Charles Jolley
2

Answer 1

You can define your own block expression, like 'each_with_index', to accomplish this. You can find out how to create this custom expression in the Handlebars documentation here: http://handlebarsjs.com/#block-expressions
Here's a quick and dirty way to do it:
var people = [ 'Yehuda Katz', 'Alan Johnson', 'Charles Jolley' ];
var source = '{{#each_with_index people}}' +
'{{ this.index }}: {{ this.item }}\n' +
'{{/each_with_index}}';
Handlebars.registerHelper('each_with_index', function(items, options) {
var output = '';
var item_count = items.length;
var item;
for (var index = 0; index < item_count; index ++) {
item = items[index];
output = output + options.fn({ item: item, index: index });
}
return output;
});
var $output = $('#output');
var template = Handlebars.compile(source);
var result = template({ people: people });
$output.html(result);
To see it working: http://jsfiddle.net/EECFR/1/

Answer 2

Use #index:
{{#each people}}
{{this}}
{{#index}}
{{/each}}
JSFiddle demo (modified from Carl's)
From http://handlebarsjs.com/#iteration:
When looping through items in each, you can optionally reference the current loop index via {{#index}}
{{#each array}}
{{#index}}: {{this}}
{{/each}}