Handlebars.js遍历LinksObject对象生成表格的语法疑问

嘿，我来帮你搞定这个Handlebars遍历的问题！核心问题出在你最外层的{{#each .}}上——你的根数据是LinksObject实例，它的核心数据存在Links数组属性里，你得直接遍历这个数组才行，而不是遍历根对象本身。

先帮你理清楚数据层级：

• LinksObject → 包含Links（Link类型的数组）
• 每个Link → 有DisplayText文本，和LinkItems（LinkItem类型的数组）
• 每个LinkItem → 有LinkText（链接显示文本）和LinkUrl（链接地址）

你的现有模板最外层遍历根对象（{{#each .}}），但根对象只有Links这一个属性，所以只会循环一次，根本没遍历到Links数组里的每个Link项，这就是你看不到预期效果的原因。

下面是修正后的完整模板代码：

<script id="entry-template-family-links" type="text/x-handlebars-template">
  <table class="table table-bordered table-condensed table-striped">
    <tbody>
      <!-- 遍历LinksObject里的Links数组 -->
      {{#each Links}}
      <tr>
        <!-- 当前上下文是Link对象，直接访问DisplayText -->
        <td>{{DisplayText}}</td>
        <td>
          <span>
            <!-- 遍历当前Link的LinkItems数组 -->
            {{#each LinkItems}}
              <a target="_blank" href="{{LinkUrl}}">{{LinkText}}</a>
              <!-- 给链接之间加逗号分隔（最后一个不加） -->
              {{#unless @last}}, {{/unless}}
            {{/each}}
          </span>
        </td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</script>

我给你解释下关键修正点：

1. 最外层用{{#each Links}}，直接指向LinksObject的Links数组，这样才能遍历每个Link对象生成表格行。
2. 在Link的上下文里，直接用{{DisplayText}}就能拿到当前项的显示文本，不需要额外的this.（当然加了也没问题，但没必要）。
3. 遍历LinkItems时，当前上下文是LinkItem对象，所以直接用{{LinkText}}和{{LinkUrl}}就可以访问属性。
4. 加了{{#unless @last}}, {{/unless}}是为了让多个链接之间用逗号分隔，更符合表格里的展示效果，你可以根据需求调整分隔符或者去掉。

另外要注意，当你把LinksObject实例作为数据传入Handlebars的compile方法时，模板的根上下文就是这个实例，所以直接访问Links属性就好，不需要额外的前缀。

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