How can I add a number of images/elements, where the number depends on a user.variable?

Question

I want to have a balloon image for every balloon in user.balloons. If user.balloons = 20, I want to get 20 balloon images on screen (in random positions, if anyone wants to give me tips on that.)

This is my first project, so sorry for something so simple. I tried:

{{#each user.balloon}} <img ... > {{/each}}

With no luck, and currently trying something like: js:

Template.main.objects= function(){
  return [{name:"balloon",src:"/img/balloon.png", number: user.balloons},{{name:"partyhat",src:"/img/partyhat.png", number: user.partyhat}];
}

And html:

{{#each objects}}
  {{#each {{number}}}}
    <img src="{{src}}" style="margin-left:{{number}}%">
  {{/each}}
{{/each}}

But that isn't working for a variety of reasons. Any help would be amazing.

(Also, I've had problems with adding user. into arrays like the above, Meteor doesn't seem to like it, sometimes crashing, anyone know how to get around that if I need to reference user.variables inside?)

Answer 1

I'd add a helper like this:

Template.main.balloons = function(n) {
   return _.range(n);
}

and then you can produce as many balloons as you like:

{{#each balloons 20}}
   <img...>
{{/each}}

Inside the loop, {{this}} will return the current index, in case you need it for any reason.

Obviously, if you always want to use the value of user.balloons for the number of balloons, it would be better to hard code it into the Template helper:

Template.main.balloons = function() {
   return _.range(Meteor.user().balloons);
}

and then call the each without a parameter.