0

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?)

Amir
  • 1,328
  • 2
  • 13
  • 27
user3115256
  • 3
  • 1

1 Answers1

0

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.

richsilv
  • 7,993
  • 1
  • 23
  • 29
  • Wicked! thanks, that worked. Although while implementing it i encountered the "user not defined" issue i mentioned. fixed by adding Meteor. prefix to user.balloons, but i dont really understand why that worked, or what the original problem was. Thanks so much! – user3115256 Dec 18 '13 at 14:06
  • Oh also, is it possible to do an each inside an each, such as: {{each object}} {{#each {{thing}} }} {{/each}} {{/each}} ? I tried it but it returns a parse error "Parse error: ...mg}} {{#each {{name}}}} – user3115256 Dec 18 '13 at 14:14
  • Sorry, updated above. The current user is retrieved with Meteor.user() as per the docs: [link](http://docs.meteor.com/#meteor_user). – richsilv Dec 18 '13 at 14:18
  • Bah, it stopped working, gave me the user not defined error again while updating some unrelated css – user3115256 Dec 18 '13 at 14:21
  • Firstly, I think you're missing the `#` off the first `{{#each}}`. However, assuming that's just a typo, the problem is that you're trying to nest double-mustaches in `{{#each {{thing}} }}`, which you can't do. This shouldn't be necessary though: just use whatever logic you need to return the right array inside a helper function, which should have access to everything you need. Let me know if you need an example. – richsilv Dec 18 '13 at 14:30
  • Note also that you **can** nest `{{#each ...}}` blocks, which was your question: see [link](http://stackoverflow.com/questions/13687065/how-to-access-outer-each-collection-value-in-the-nested-loop) – richsilv Dec 18 '13 at 14:31