I understand how to transverse the data source within Handlebars but I have stumbled across a situation I cannot work out.

Using "../" you can reach the parent template scope but when iterating through the child of an object it seems to return the object and not the child.

{{#each content.items}}
{{#if prop}}
<p>{{prop}} + {{../../variable}}</p>
{{/if}}
{{/each}}

The above code snippet works fine if you iterate through an object called 'content' but as soon as you iterate through it's child, 'content.items' it no longer returns the right scope.

Here is a fiddle which demonstrates the issue. /

Can anyone shed any light on what is wrong?

I understand how to transverse the data source within Handlebars but I have stumbled across a situation I cannot work out.

Using "../" you can reach the parent template scope but when iterating through the child of an object it seems to return the object and not the child.

{{#each content.items}}
{{#if prop}}
<p>{{prop}} + {{../../variable}}</p>
{{/if}}
{{/each}}

The above code snippet works fine if you iterate through an object called 'content' but as soon as you iterate through it's child, 'content.items' it no longer returns the right scope.

Here is a fiddle which demonstrates the issue. http://jsfiddle/sidonaldson/MDdn2/

Can anyone shed any light on what is wrong?

• javascript
• handlebars.js

Share Improve this question Follow asked Jul 30, 2013 at 11:36 sidonaldsonsidonaldson 25.3k1010 gold badges6060 silver badges6464 bronze badges 3

• I'm not entirely sure what's going on with your current code, but an easy solution would be to use the {{with}} helper to save the outer scope. It would probably be easier to read as well. – GJK Commented Jul 30, 2013 at 11:58
• GJK - if you want to demo that in an answer I'll mark it as such. Kinda sounds like what I need! – sidonaldson Commented Jul 31, 2013 at 23:16
• #if creates a new nest so the only thing I can think of is that it skips out of the parent nest to just above it. Im not sure if it answers your question but, for posterity, adding the #if nest and the content nest to the path seems to work... <p>{{prop}} + {{../../content/variable}}</p> jsfiddle/MDdn2/3 – Shanimal Commented Jun 11, 2014 at 0:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

It turns out that my original thought was wrong. I've only used Handlebars.js inside the context of Ember.js. Ember provides some extra helpers that aren't available in plain Handlebars, so that wasn't an option. But I did seem to figure out your issue. Check this fiddle.

<p>IN CONTENT</p>
{{#with content}}
{{#each items}}
{{#if prop}}
<p>{{prop}} + {{../../variable}}</p>
{{/if}}
{{/each}}
{{/with}}
<p>OUTSIDE CONTENT</p>
{{#each items}}
{{#if prop}}
    <p>{{prop}} + {{../../variable}}</p>
{{/if}}
{{/each}}

I'm not sure why it didn't work in the first place, but using the with helper, then the each helper seemed to work. Hopefully I've e close to what you wanted.