访问车把中的父项属性，每个车把嵌套属性

Question

我正在使用 handlebars 迭代嵌套数组并使用 handlebars 模板显示数据，但我需要访问不属于我正在迭代的数组的属性。当数组未嵌套时，这将按预期工作。这是一个示例（您可以将这些直接粘贴到 tryhandlebars）：

模板：

<div class="entry">
  <div class="body">
    {{#each items}}
      <p>{{name}} - {{quantity}} {{../currency}}</p>
    {{/each}}
  </div>
</div>

数据：

{
  currency: 'GBP',
  items: [
    {
      name: 'apples',
      quantity: 5
    }, {
      name: 'bananas',
      quantity: 7
    }
  ]
}

但现在我需要将一个全新的数据结构传递给模板，所以我将水果数据包装为另一个对象的属性:

{fruit: {
  currency: 'GBP',
  items: [
    {
      name: 'apples',
      quantity: 5
    }, {
      name: 'bananas',
      quantity: 7
    }
  ]
}}

我将 #each 更改为遍历 fruit.items 而不是 items:

{{#each fruit.items}}
  <p>{{name}} - {{quantity}} {{../currency}}</p>
{{/each}}

现在名称和数量都和以前一样正确输出了，但是币种是空白的。使用 ../currency 的相对引用似乎不再有效。唯一的区别是传递给 each 的值中的点符号。如何在嵌套属性中使用相对路径？

我尝试创建一个采用相对引用的辅助函数，这样我就可以检查值并可以看到货币引用未定义。

Answer 1

关于在 #each.

中父上下文是什么，这里有点混乱

作为提示，发现父上下文的一个好方法是使用 Handlebars 的内置 log helper。

在我们的 #each 中，我们可以添加 {{log ..}} 并且 Handlebars 将在控制台上打印我们父项的值。

在这种情况下我们得到：

{
  fruit: {
    currency: 'GBP',
    items: Array(2) [...]
  }
}

这告诉我们，我们的父对象是根上下文而不是 fruit 对象。这是有道理的，因为我们从不“步入”fruit 的上下文——例如，通过使用 {{#with fruit}}{{#each items}}——而是直接从根迭代 fruit.items。

这意味着我们只需要将 ../currency 更改为 ../fruit.currency。另一种方法是使用 Handlebars 的 @root data variable 直接跳转到我们的根上下文：@root/fruit.currency.

第二种选择是使用上面提到的 #with 助手。这会创建一个 fruit 上下文，允许我们保留模板的 #each 部分，就像您在 post:

中那样

{{#with fruit}}
  {{#each items}}
     <p>{{name}} - {{quantity}} {{../currency}}</p>
  {{/each}}
{{/with}}

我创建了一个fiddle供您参考。

Access parent property in handlebars each where each is nested property