Access a variable outside the scope of a Handlebars.js each loop
Solution 1
Try
<option value="{{id}}">{{title}} {{../externalValue}}</option>
The ../
path segment references the parent template scope that should be what you want.
Solution 2
Or you can use absolute path like this:
<option value="{{id}}">{{title}} {{@root.user.path.to.externalValue}}</option>
Solution 3
I saw many links with 404 for documentation about this topic.
I update it with this one, it is working in April 1st 2020:
https://handlebarsjs.com/guide/expressions.html#path-expressions
Some helpers like #with and #each allow you to dive into nested objects. When you include ../ segments into your path, Handlebars will change back into the parent context.
{{#each people}}
{{../prefix}} {{firstname}}
{{/each}}
Even though the name is printed while in the context of a comment, it can still go back to the main context (the root-object) to retrieve the prefix.
WARNING
The exact value that ../ will resolve to varies based on the helper that is calling the block. Using ../ is only necessary when context changes. Children of helpers such as {{#each}} would require the use of ../ while children of helpers such as {{#if}} do not.
{{permalink}}
{{#each comments}}
{{../permalink}}
{{#if title}}
{{../permalink}}
{{/if}}
{{/each}}
In this example all of the above reference the same prefix value even though they are located within different blocks. This behavior is new as of Handlebars 4, the release notes discuss the prior behavior as well as the migration plan.
Related videos on Youtube
![lucke84](https://i.stack.imgur.com/VhjCY.jpg?s=256&g=1)
lucke84
IT professional, guitar player, beer lover, life contributor. Some buzzwords: engineering lead, backend, infrastructure, devops. I share thoughts and links here: https://twitter.com/lucacanducci
Updated on April 02, 2020Comments
-
lucke84 over 4 years
I have a handlebars.js template, just like this:
{{externalValue}} <select name="test"> {{#each myCollection}} <option value="{{id}}">{{title}} {{externalValue}}</option> {{/each}} </select>
And this is the generated output:
myExternalValue <select name="test"> <option value="1">First element </option> <option value="2">Second element </option> <option value="3">Third element </option> </select>
As expected, I can access the
id
andtitle
fields of every element ofmyCollection
to generate my select. And outside the select, myexternalValue
variable is correctly printed ("myExternalValue").Unfortunately, in options' texts,
externalValue
value is never printed out.My question is: how can I access a variable outside the scope of the handlebars.js each from within the loop?
-
bcmcfc over 10 yearsIf future readers are still having trouble like I was, have a look at the comment for this answer here. It took me a while after seeing this answer to see that one. You may need to use
../
repeatedly depending on how many scopes away from the value you are. -
Jesse over 9 yearsAm I crazy or is this type of valuable information nowhere to be found on the handlebars docs???
-
Jesse over 9 years@spliter Ugh, yeah, I'm an idiot. I don't know how I didn't see that. Forest for the trees or something.
-
kweku360 over 8 years@spliter will this work on ember handlebars.. it seems not to be working
-
spliter over 8 yearsNo idea @kweku360. This works for normal hadlebars. Might be that Ember is using customized version of handlebars where this functionality is implemented with another means
-
Marco almost 7 yearsThank you man, this works perfectly also with Foundation 6 Panini.