25

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}}
Hubert OG
  • 19,314
  • 7
  • 45
  • 73
Bads
  • 774
  • 3
  • 8
  • 20
  • 1
    http://stackoverflow.com/questions/11884960/how-to-get-index-in-handlebars-each-helper suggests that stock handlebars has `{{@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. – Serkan Durusoy Feb 16 '14 at 20:20
  • @HubertOG Meteor in the shark branch its spacebars. https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview – Bads Feb 17 '14 at 02:23

3 Answers3

65

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>
David Weldon
  • 63,632
  • 11
  • 148
  • 146
  • 1
    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. – Bads Feb 17 '14 at 02:26
  • 2
    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`. – David Weldon Feb 17 '14 at 02:42
  • 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. – Bads Feb 17 '14 at 03:48
  • rank works, name doesn't. any tips? – krivar Mar 27 '14 at 11:57
  • 6
    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. – 4Z4T4R Jul 07 '16 at 21:52
3

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.

kynan
  • 13,235
  • 6
  • 79
  • 81
elGusto
  • 56
  • 6
-10

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.

outofambit
  • 43
  • 3