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!
Best Answer
There are two valid ways to achieve this.
Dereference the parent scope with
../
By prepending
../
to the property name, you can reference the parent scope.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.
Dereference the root scope with
@root
By prepending
@root
to the property path, you can navigate downwards from the topmost scope (as shown in caballerog's answer).For more information, see the Handlebars documentation on @data variables.