Handlebars中each循环内调用集合首个元素属性失效问题排查

嘿，这个问题我太熟了——本质是Handlebars的上下文作用域在搞鬼！

为什么循环内不显示，循环外正常？ #

当你用{{#each Flights}}的时候，Handlebars会把当前上下文切换到每一个迭代的Flight对象。也就是说，在循环内部，{{PassengerPricing.0.BaggageDescription}}是在尝试从当前的单个Flight对象里找PassengerPricing属性，但你的PassengerPricing显然是定义在Flights数组的上层上下文里（也就是循环外面的那个上下文），所以循环内自然找不到，也就显示不出来；而循环外的代码直接访问上层上下文的属性，所以正常工作。

怎么解决？ #

你需要明确告诉Handlebars，要从上层上下文或者根上下文去获取PassengerPricing，有两种常用方式：

1. 使用../访问上层上下文
   ../在Handlebars里代表“跳出当前上下文，访问上一级的上下文”，修改后的循环代码如下：

{{#each Flights}}
  <tr>
    <td>
      <div class="col-md-10">
        <strong><span data-i18n="app.booking.flight-number"></span></strong>{{FlightNumber}}
        <strong>Bagaj:</strong>{{../PassengerPricing.0.BaggageDescription}}
      </div>
    </td>
  </tr>
{{/each}}
<strong>Bagaj1:</strong>{{PassengerPricing.0.BaggageDescription}}

2. 使用@root访问根上下文
   如果你的PassengerPricing是在整个模板的根数据对象里，用@root会更稳妥（避免多层嵌套时../层级混乱），代码如下：

{{#each Flights}}
  <tr>
    <td>
      <div class="col-md-10">
        <strong><span data-i18n="app.booking.flight-number"></span></strong>{{FlightNumber}}
        <strong>Bagaj:</strong>{{@root.PassengerPricing.0.BaggageDescription}}
      </div>
    </td>
  </tr>
{{/each}}
<strong>Bagaj1:</strong>{{PassengerPricing.0.BaggageDescription}}

额外提示 #

如果你的PassengerPricing其实是每个Flight对象应该有的属性，那你需要检查数据源是否正确——是不是每个Flight里都没有填充PassengerPricing字段？这种情况下就要修复数据源，而不是调整模板语法了。

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