Handlebars模板中在each循环外绑定对象的问题求助

嘿，我来帮你搞定这个Handlebars绑定的小问题！从你给出的JSON数据来看，核心是要搞清楚Handlebars的上下文切换——这也是很多人刚用Handlebars时容易踩的坑。

先明确两种场景的解决方案： #

1. 在sectorsPressCoverageElements循环外部绑定根对象属性

循环外部的上下文就是你的根JSON对象，直接用属性名就能绑定，不需要额外操作。比如这样写模板：

<!-- 循环外部：直接访问根对象的属性 -->
<h2>{{name}}</h2>
<div class="pagination">
  当前页：{{page}} / 总页数：{{pages}}
</div>

<!-- 遍历数组的each循环 -->
<div class="coverage-list">
  {{#each sectorsPressCoverageElements}}
    <div class="coverage-item">
      <h3>{{media}}</h3>
      <p>{{article}}</p>
      <span>发布日期：{{publishingDate}}</span>
    </div>
  {{/each}}
</div>

这样{{name}}、{{page}}、{{pages}}都能正常渲染出对应的值，因为此时模板的上下文是根对象。

2. 如果是在循环内部需要访问外部的根对象属性

当进入each循环后，上下文会切换到当前的数组项（也就是每个sectorsPressCoverageElements里的对象），这时候要访问根对象的属性，需要用两种方式切换上下文：

• 使用../回到上一级上下文（也就是根对象）
• 使用@root直接引用根对象

示例模板：

{{#each sectorsPressCoverageElements}}
  <div class="coverage-item">
    <!-- 用../访问根对象的name属性 -->
    <span>所属栏目：{{../name}}</span>
    <h3>{{media}}</h3>
    <p>{{article}}</p>
    <!-- 用@root直接访问根对象的pages属性 -->
    <span>总页数：{{@root.pages}}</span>
  </div>
{{/each}}

可能的排查点： #

如果还是无法绑定，先检查这几点：

• 有没有拼写错误？比如把name写成Name（JSON的键名是大小写敏感的）
• 数据有没有正确传递到Handlebars模板的渲染函数里？比如确认template(data)里的data确实是你给出的JSON对象
• 模板的each块有没有正确闭合？有没有漏写{{/each}}

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