How can I get the index of an array in a Meteor template each loop?

by

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:

{{#each getArray}}
  <div class="item" data-value="{{@index}}">{{this}}</div>
{{/each}}

or, if you want to use the index inside a helper:

{{#each getArray}}
  <div class="item" data-value="{{someHelper @index}}">{{this}}</div>
{{/each}}

meteor < 1.2

Sometime in the future, spacebars may offer the ability to determine the index directly in the template. However, as of this writing, the only way to get the index is to modify the result returned by the helper. For example you could have getArray return an array of objects which contain a value and an index, like this:

getArray: function() {
  var self = this;
  self.myArray = self.myArray || [];
  return _.map(self.myArray, function(value, index){
    return {value: value, index: index};
  });
}

And the template could use the index like this:

<template name="someObject">
  {{#each getArray}}
    <div class="item" data-value="{{index}}">{{value}}</div>
  {{/each}}
</template>

Also see this answer for a similar example with cursors.

It’s worth mentioning that you probably don’t need to store the index in the DOM itself via data-value, unless it’s needed by an external plugin. As you can see in the example below, each item has a context with an index value. For more information, see this blog post.

Template.someObject.events({
  'click .item': function() {
    console.log(this.index);
  }
});

More Related Contents:

  1. How to use Meteor methods inside of a template helper
  2. Meteor.publish: publish collection which depends on other collection
  3. Understanding Meteor Publish / Subscribe
  4. Meteor: Calling an asynchronous function inside a Meteor.method and returning the result
  5. How can I access constants in the lib/constants.js file in Meteor?
  6. Using Multiple Mongodb Databases with Meteor.js
  7. Meteor: Proper use of Meteor.wrapAsync on server
  8. using a variable in mongodb update
  9. How does the messages-count example in Meteor docs work?
  10. How do we or can we use node modules via npm with Meteor?
  11. In meteor is there a way to access array index in spacebars [duplicate]
  12. How do I use the Spacing Utility Classes in Bootstrap
  13. Background tasks in Meteor
  14. “Meteor code must always run within a Fiber” when calling Collection.insert on server
  15. Dynamically loading templates in Meteor.js
  16. How do I change the order in which Meteor loads Javascript files?
  17. Displaying loader while meteor collection loads
  18. Meteor JS: use external script
  19. Global variables in Meteor
  20. Is there a way to pass variables into templates in Meteor?
  21. How can I add third-party JavaScript libraries to a Meteor application?
  22. Server cleanup after a client disconnects
  23. Verify user password in Meteor
  24. How can I dynamically highlight strings on a web page?
  25. Best Model for Representing Many to Many relationships with attributes in MongoDB
  26. Meteor publish/subscribe strategies for unique client-side collections
  27. How to trigger the onclick event of a marker on a Google Maps V3?
  28. Low power mode detection in JavaScript for iOS11?
  29. Explain bindbind() function
  30. read csv/tsv with no header line in D3

Leave a Comment