I am using meteor Shark branch.
Is there a way to access array index inside each block helper in spacebars?
I am looking for something like this.
{{#each humans}}
{{this.arrayIndex}}
{{/each}}
3 Answers
meteor >= 1.2
Spacebars gained a lot of functionality in 1.2, including a native @index. Helpers are no longer needed to solve this problem - you can simply do this:
<template name="showHumans">
<ul>
{{#each humans}}
<li>{{@index}}: {{name}}</li>
{{/each}}
</ul>
</template>
meteor < 1.2
I saw a similar example using template helpers in the meteor book in the "animations" chapter. You can apply a map to the humans cursor in order to add an index like so:
Template.showHumans.helpers({
humans: function() {
return Humans.find({}, {sort: {hotness: -1}}).map(function(human, index) {
human.rank = index;
return human;
});
}
});
<template name="showHumans">
<ul>
{{#each humans}}
<li>{{rank}}: {{name}}</li>
{{/each}}
</ul>
</template>
5 Comments
Bads
love the sort hotness -1. This works but there is some nested array inside the object that returns. That's why I am looking to access the index from the template.
David Weldon
Haha - glad you liked that. Did you try just doing a
fetch() on the cursor, manipulating the sub-arrays, and then returning the whole array to the template? I don't know how else to do it since spacebars doesn't seem to support @index.Bads
That's sad. I don't like this solution but had a haunch that it is the only way to go. In the Template Engine preview page on github it says it will support index with each helper but I guess I have to wait still. Thanks a lot.
krivar
rank works, name doesn't. any tips?
4Z4T4R
If you need a 1-based index, create a Template helper
Template.registerHelper('count1', function(count) { return count + 1; }); and then use it like so... {{count1 @index}} ...in your spacebars template.As taken from the spacebars documentation:
You can use a special variable @index in the body of #each to get the 0-based index of the currently rendered value in the sequence.
Comments
In Meteor 1.0.2.1, you can do the following:
{{#each humans}}
{{this}}
{{/each}}
This is because #each iterates through the array, making the this in each loop simply equal to the current value.
{{@index}}for arrays and{{@key}}for objects. On the other hand, I think a custom template helper or a global handlebars helper would be more extensible.