Handlebars嵌套{{#each}}循环时如何访问外部独立集合数据

问题原因 #

{{#each}}遍历块会自动切换内部作用域为当前遍历到的元素对象，因此直接在内部写countries会默认在当前的comment对象下查找对应字段，自然找不到独立的外层countries集合。

解决方法 #

• 方法1：使用内置的@root变量访问顶层上下文
  @root始终指向传入模板的最顶层数据对象，不受嵌套层级影响：

{{#each comments}}
    // somecode
    {{#each @root.countries}}
        <!-- 此处即可正常遍历外层独立的countries集合 -->
    {{/each}}
    // somecode
{{/each}}

• 方法2：使用../跳转上层作用域
  如果countries存储在当前each块的上一级作用域中，可用../向上跳转一层作用域访问：

{{#each comments}}
    // somecode
    {{#each ../countries}}
    {{/each}}
    // somecode
{{/each}}

如果嵌套多层each，需要写对应数量的../跳转，比如嵌套2层就写../../countries。

• 方法3：使用as语法为遍历项起别名（更推荐）
  可以直接给每层遍历项自定义别名，别名可以跨作用域访问，完全规避作用域切换带来的变量冲突，代码可读性更高：

{{#each comments as |comment|}}
    // 直接通过comment.xxx访问当前评论的字段
    {{#each countries as |country|}}
        <!-- 可同时访问comment和country两个集合的字段 -->
        <p>评论内容：{{comment.content}} 所属国家：{{country.name}}</p>
    {{/each}}
{{/each}}

内容的提问来源于stack exchange，提问作者Ho Quang Lam