How to access outer {{#each}} collection value in the nested loop

Question

What is the standard way to access outer #each collection values in the loop? for example:

<template name="example">
  {{#each outerCollection}}
  <tr>
    {{#each innerCollection}}
      <td>{{aaa}}</td>
    {{/each}}
  </tr>
  {{/each}}
</template>

Template.example.aaa = function(){
  // cannot access outerCollection values
}

in above Template.example.aaa, this points to the inner collection.

I cannot find way to access outerCollection items. My solution is like below, I am defining my own helper function. Is it a standard Meteor way to achieve this purpose?

<template name="example">
  {{#each outerCollection}}
  <tr>
    {{#each innerCollection}}
      <td>{{myHelper ../outerItem innerItem}}</td>
    {{/each}}
  </tr>
  {{/each}}
</template>

Handlebars.registerHelper('myHelper', function (outItem, inItem) {
  // can access outerCollection via outerItem
});

I found a similar question for the case of inner event handler access.

thanks for your comment. I posted this question is because I don't have confidence for my code and cannot find meteor sample code for this purpose. I want to know if anyone knows more clever implementation. — hyde, Dec 04 '12 at 05:43
Here is better way, no need registerHelper as above, following syntax can work: Template.example.myHelper = function(outItem, inItem){ /* can access outerCollection item via outItem */ }; — hyde, Dec 06 '12 at 14:44
This might also help: [http://stackoverflow.com/questions/13789622/accessing-parent-context-in-meteor-templates-and-template-helpers/13851721#13851721][1] [1]: http://stackoverflow.com/questions/13789622/accessing-parent-context-in-meteor-templates-and-template-helpers/13851721#13851721 — zorlak, Dec 14 '12 at 00:58

score 12 · Answer 1 · answered Dec 14 '12 at 00:52

12

I think you've answered this yourself! Using ../ is documented in https://github.com/meteor/meteor/wiki/Handlebars.

answered Dec 14 '12 at 00:52

David Glasser

1,438
13
21

1

But how do you get {{aaa}} in the js ? – kpie May 11 '16 at 09:42

score 2 · Answer 2 · answered May 14 '16 at 12:27

You can use below code to fetch outer collections.

suppose you have collection called as Collection.Customer and Collection.RechargePlan and you are using both in a template for updating Customer.

Customer = {"name":"James", "rechargeplan":"monthly"};
RechargePlan = [{"rechargeplan": "monthly"},{"rechargeplan": "yearly"}];

 //Inside template, Bydefault Customer is available.
{{#each RechargePlan}}
  {{#if equals ../rechargeplan rechargeplan}}
      //Hurray Plan matches
  {{/if}}
{{/each}}

In above code, ../rechargeplan is actually Customer.rechargeplan, ../ actually went one step above heirarchy and then accessed the field if available, since Customer is already available to template, it's field is picked up.

How to access outer {{#each}} collection value in the nested loop

2 Answers2

Linked