Handlebars嵌套变量/对象访问问题：无法获取上层变量

解决Handlebars嵌套上下文里访问外层变量的问题 #

我来帮你搞定这个嵌套层级里的变量访问问题～你遇到的情况是在多层#each和自定义helper里，想拿到最外层的locale变量，但用../这类相对路径方法不管用，还怀疑是变量名冲突，下面给你几个靠谱的解决方案：

1. 用@root直接访问顶层变量 #

Handlebars提供了@root这个内置变量，专门用来直接指向最顶层的上下文，不管你嵌套多少层都能直接拿到顶层的变量。用法很简单：

{{myvariable}}
{{#each grandparent}}
  {{#each parent}}
    {{#customhelper}}
      {{log @root.locale}} {{! 这里直接用@root.变量名就能拿到顶层的locale }}
    {{/customhelper}}
  {{/each}}
{{/each}}

这个方法最稳妥，完全不用考虑嵌套层级和上下文切换的问题。

2. 调用helper时直接传入变量 #

如果不想依赖上下文查找，也可以在调用自定义helper的时候，把需要的变量直接传进去，这样就能彻底避开上下文冲突的问题：

{{#each grandparent}}
  {{#each parent}}
    {{! 调用helper时通过hash参数传入顶层变量 }}
    {{#customhelper targetLocale=@root.locale}}
      {{log targetLocale}}
    {{/customhelper}}
  {{/each}}
{{/each}}

然后在你的自定义helper代码里，就可以通过options.hash.targetLocale来获取这个传递过来的变量了。

3. 验证是否真的是命名冲突 #

你怀疑locale和语言管理变量重名，可以先做个小测试：把顶层的变量临时改成别的名字（比如myTestLocale），然后用@root.myTestLocale试试能不能访问到。如果能正常拿到，就说明确实是命名冲突导致原来的locale被覆盖了，这时候要么换个变量名，要么用上面两种方法绕开就行。

为什么../这类方法不管用呢？主要是因为每进入一个#each或者自定义helper，Handlebars的上下文都会切换，../只能指向当前上下文的直接父级，但自定义helper的上下文可能和外层#each的上下文不是连续的，再加上如果有命名冲突，外层的locale早就被同名变量覆盖了，自然返回undefined。

内容的提问来源于stack exchange，提问作者Romeo