Drew Noakes Drew Noakes - 7 months ago 23
Javascript Question

Access properties of the parent with a Handlebars 'each' loop

Consider the following simplified data:

var viewData = {
itemSize: 20,
items: [
'Zimbabwe', 'dog', 'falafel'
]
};


And a Handlebars template:

{{#each items}}
<div style="font-size:{{itemSize}}px">{{this}}</div>
{{/each}}


This won't work because within the
each
loop, the parent scope is not accessible -- at least not in any way that I've tried. I'm hoping that there's a way of doing this though!

Answer

It turns out that this is possible by prepending ../ to the property name:

{{#each items}}
    <div style="font-size:{{../itemSize}}px">{{this}}</div>
{{/each}}

You can go up multiple levels via repeating the ../. For example, to go up two levels use ../../key.

For more information, see the Handlebars documentation on paths.