Handlebars.js: How to access parent index in nested each?

How to access parent @index value in each-loop?

Tried the following:

{{#each company}}
{{#each employee}}
  {{../@index}} // how to access company index here?
{{/each}}
{{/each}}

This results to an error:

Expecting 'ID', got 'DATA'

Solution 1:

There is a syntax error in the example. The correct syntax is {{@../index}}.

We are looking at ways that we can support custom naming of these parameters in future versions of the language so this is easier to deal with. https://github.com/wycats/handlebars.js/issues/907

Solution 2:

This worked for me:

{{#each company}}
{{setIndex @index}}
{{#each employee}}
  {{../index}}
{{/each}}
{{/each}}

JS:

Handlebars.registerHelper('setIndex', function(value){
    this.index = Number(value + 1); //I needed human readable index, not zero based
});

Just make sure the company object doesn't have index property.

Solution 3:

Answer: {{@../index}}

From the Handlebars docs (see bottom of 'each' helper section):

"Nested each blocks may access the interation variables via depted paths. To access the parent index, for example, {{@../index}} can be used."

NOTE: I'm using v1.3 so it's at least that old.

REMINDER: Helpers are your last best option. 9/10 there is a better solution.

Solution 4:

It looks like there's a new syntax in Ember v2.2.0. I tried all the answers here and they didn't work for me.

What I found worked was naming the parent loop's index and the child loop's index.

{{#each parents as |parent parentIndex|}}
    {{parentIndex}}
    {{#each children as |child childIndex|}}
        {{parentIndex}}
        {{childIndex}}
    {{/each}}
{{/each}}