1

Is there a way to get "the number" for a numbered list of the items I have in a Meteor collection. I know I can do it in html, but I feel like it would be much easier to style if I could just drop something in the {{spacebars}}. If there's better terminology I could be using, please let me know. Something like this.

List of top 20 movies:

    {{#each movie}}
         Movie #{{number}} {{movie_name}} {{review_score}}
    {{/each}}
Quin
  • 441
  • 5
  • 12
  • It would help if you post a snippet of code that you've tried, or something we can work with. –  Feb 20 '15 at 10:13
  • Ok, I added a little something. Where I have the word "number," is there a way to get the list number there? – Quin Feb 20 '15 at 10:25

3 Answers3

1

I do not properly understand your question, neither do I know much about Meteor-Collections, but in general, if you iterate over an Array and want to get the index of each element, you could do it easily with:

[1,2,3].forEach(function(e,i){ console.log(i+":"+e); })

 0:1
 1:2
 2:3

See MDN for forEach().

Thomas Junk
  • 5,588
  • 2
  • 30
  • 43
  • I didn't even know I was looking for the word "index." Apparently, some versions of handlebars let you simply use {{@index}}, but not Meteor's version. I'll try to work with what you provided here and other solutions on Stack and see what I come up with. – Quin Feb 20 '15 at 10:51
1

There is pull request which does exactly what you want:

{{#each movie}}
   {{@index}}{{movie}}
{{/each}}

Until they merge it you can use other approach:

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

Community
  • 1
  • 1
Kuba Wyrobek
  • 5,273
  • 1
  • 24
  • 26
  • Thanks, that was what I was looking to discover. That and the proper way to articulate the issue, which Thomas Junk clued me in on (I'll probably just wait for this to get implemented). – Quin Feb 20 '15 at 11:03
1

Try it with using "map" from Underscore.js.

I'm expecting you have movies in your "Movie" collection and they look something like this:

{
    title: "Shawshank Redemption",
    score: 92
},
{
    title: "Forrest Gump",
    score: 96
},
{
    title: "Green Mile",
    score: 91
},
{
    title: "The Godfather",
    score: 95
}

... and so on ...

And here is "yourTemplate" helper function:

Template.yourTemplate.helpers({
    movie: function () {
        var loadMovies = Movie.find({}, {sort: {score: -1}, limit: 20}).fetch(); // added descending sorting by review score
        var array = _.map(loadMovies, function(movie, index) {
            return {
                    number: index+1, // incrementing by 1 so you won't get 0 at the start of the list
                    movie_name: movie.title,
                    review_score: movie.score
                   };
        });
        return array;
    }
});

So now you can use it in your template like this:

<template name="yourTemplate">
    {{#each movie}}
         Movie #{{number}} {{movie_name}} {{review_score}}
    {{/each}}
</template>
Michal Takac
  • 37
  • 1
  • 6