javascript - Access a variable outside the scope of a Handlebars.js each loop - Stack Overflow

admin管理员组

文章数量:1129646

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 and title fields of every element of myCollection to generate my select. And outside the select, my externalValue 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?

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 and title fields of every element of myCollection to generate my select. And outside the select, my externalValue 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?

• javascript
• templates
• scope
• each
• handlebars.js

Share Improve this question Follow edited Jun 18, 2019 at 17:09 H. Pauwelyn 14.3k2828 gold badges9191 silver badges159159 bronze badges asked Nov 30, 2012 at 12:17 lucke84lucke84 4,63633 gold badges3838 silver badges5858 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 555

Try

<option value="{{id}}">{{title}} {{../externalValue}}</option>

The ../ path segment references the parent template scope that should be what you want.

Or you can use absolute path like this:

<option value="{{id}}">{{title}} {{@root.user.path.to.externalValue}}</option>

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.

Not an answer to the original question, but I faced a similar problem - I have a custom helper that was not rendering the variables inside of it.

My helper was similar to the handlebars if helper, so it should not have needed the ../path syntax. Turns out I was using a fat arrow function when registering the helper, and this is different inside a fat arrow function.

Changing this:

Handlebars.registerHelper('ifeq', (v1, v2, options) => {    

to:

Handlebars.registerHelper('ifeq', function (v1, v2, options)  {

fixed it for me

本文标签： javascriptAccess a variable outside the scope of a Handlebarsjs each loopStack Overflow