Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
70
rated 0 times [  74] [ 4]  / answers: 1 / hits: 25054  / 10 Years ago, sat, june 14, 2014, 12:00:00

Say I have an object, someObject:



{
foo: apple,
myArray: [abc, def]
}


And a template helper that looks like this (and works fine):



getArray: function(){
var self = this;
self.myArray = self.myArray || [];
return self.myArray;
}


How should I construct the html to get the array index?



I've tried:



<template name=someObject> // takes someObject as data
{{#each getArray}}
<div class=item data-value={{WHAT GOES HERE?}}>{{this}}</div>
{{/each}}
</template>


In which case this successfully returns abc and def. Which is good. But how can I get the index of the array to put into the attribute data-value?



I've tried this.index directly but it's undefined. I also tried using a helper:



<template name=someObject> // takes someObject as data
{{#each getArray}}
<div class=item data-value={{getindex}}>{{this}}</div>
{{/each}}
</template>


but in this helper getIndex when I console.log out this I see:



String {0: a, 1: b, 2: c, length: 3}
String {0: d, 1: e, 2: f, length: 3}


Is it possible to get the index?


More From » meteor

 Answers
49

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);
}
});

[#70569] Thursday, June 12, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ervindouglasm

Total Points: 451
Total Questions: 103
Total Answers: 102

Location: Turkmenistan
Member since Thu, Dec 1, 2022
2 Years ago
;