DEV Community

R. Tyler Croy
R. Tyler Croy

Posted on • Originally published at brokenco.de

2 2

Accessing Handlebars variables in an outer scope

This weekend I learned some unfamiliar behaviors with the way Handlebars handles nested variable scopes. I typically use Handlebars via the handlebars-rust implementation which aims to maintain nearly one to one compatibility with the JavaScript implementation. They have block scope helpers such as #each and #with, both of which create an inner scope for variable resolution. Unfortunately, the syntax can be quite unintuitive for accessing outer scope once in those nested scopes.

Handlebars is a largely declarative templating syntax which uses curlybraces such as {{var}} for variable and helper substitution. The #each helper is important for loops, imagine the following data structure:

{
  "repos" : [
    {
      "name" : "otto"
    },
    {
      "name" : "l4bsd"
    }
  ],
  "mood" : "cool"
}
Enter fullscreen mode Exit fullscreen mode

This could be rendered into a list on a page via:

<ul>{% raw %}
    {{#each data.repos}}
        <li>{{name}}</li>
    {{/each}}{% endraw %}
</ul>
Enter fullscreen mode Exit fullscreen mode

Inside the #each block the values of the indexed object become the scope for variable resolution, such that {{name}} actually refers to data.repos[i].name. This presents problems when the template must refer to outer scope variables, such as mood. In the Rust implementation this variable resolution can be accomplished through a path traversal style syntax such as:

<ul>{% raw %}
    {{#each data.repos}}
        <li>{{name}} is {{../data.mood}}</li>
    {{/each}}{% endraw %}
</ul>
Enter fullscreen mode Exit fullscreen mode

The ../data.mood is all that's needed to refer to the variable in the outer scope of variables. Not what I expected at all, and the only reason I found it was because I found an old issue which alluded to the syntax and gave it a try.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay