Accessing collection index in Handlebars/Blaze #each loop - html

Question

I'm messing around with a Meteor Leaderboard example. Let's say I wanted to display the index of an item inside a handlebars #each loop:
{{#each players}}
{{> player}}
{{/each}}
<template name="player">
<div class="player {{selected}}">
<span class="index">{{index}}</span>
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
</div>
</template>
Normally one would write a handlebars helper for this, but I'm having trouble figuring out how to get it working with a Meteor collection.
How would one do this? Thank you.

Answer 1

There is now an #index feature in Blaze:
{{#each players}}
{{> player index=#index}}
{{/each}}
<template name="player">
<div class="player {{selected}}">
<span class="index">{{index}}</span>
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
</div>
</template>
Template.player.helpers({
index() {
var data = Template.currentData();
if( data ) {
return data.index;
}
}
});

Answer 2

If you are just trying to show the mongo generated id just use _id
<span class="id">{{_id}}</span>
It will show the unique index id in the collection. It won't be pretty.
I may have misunderstood your question. Sorry if I did.

Answer 3

Adding an answer for this question. I had to put some hours figuring it out
In your client
Template.player.data = function(data){
if(type){
return Template[ 'player' ](data);
}
}
In your template
{{#each players}}
{{data this}}
{{/each}}
This will work seamlessly.

Answer 4

Here's how I solved this - not a perfect solution - by using the fact that Mongo typically creates indexes that increase in value.
Template.item.index = function() {
return Items.find().count() - Items.find({_id: {$lte: this._id}}).count() + 1
}
I then use this in the template like so:
{{index}}
Hope this helps!