To solve this issue, I developed a custom helper method:
/**
* An enhanced iteration method for arrays in Handlebars templates
* It adds properties to each object: "_index" (zero-based index) and "_position" (one-based index)
*/
Handlebars.registerHelper('iter', function(context, options) {
var fn = options.fn, inverse = options.inverse;
var ret = "";
if(context && context.length > 0) {
for(var i=0, j=context.length; i<j; i++) {
ret = ret + fn(_.extend({}, context[i], { _index: i, _position: i + 1 }));
}
} else {
ret = inverse(this);
}
return ret;
});
This custom method appends two new members (_index, _position) to the input object. I used prefixes to avoid unintentional overwriting of existing properties.
You can utilize this template like so:
{{#each thumbs}}
<img src="{{src}} data-large="{{../<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="543d39353331277a143f315e2874782b">[email protected]</a>}}" data-index"={{_index}}" data-position"={{_position}}" alt="">
{{/each}}
However, considering your specific case, it seems that using _position may not be necessary.