javascript - 嵌套的 {{#each}} 不工作

Question

我的 JavaScript 中有以下数组:

let food = [
    'taco',
    'burrito',
    'hamburger',
  ]

let drinks = [
    'water',
    'milk',
    'soda',
  ]

我将这些传递到我的 Handlebars 模板并执行以下操作:

{{#each food as |food|}}
  {{food}}
  {{#each drinks as |drink|}}
    {{drink}}
  {{/each}}
{{/each}}

但它只打印出来

taco burrito hamburger

我希望输出是这样的(为了易读性分隔成换行符)

taco
water
milk
soda
burrito
water
milk
soda
hamburger
water
milk
soda

它似乎完全忽略了嵌套的 each 循环。这里有什么问题？

Answer 1

这是上下文问题。内部 each 位于外部未定义 drinks 的上下文中。

这是一个工作模板的例子；

{{#each food as |food|}}
  {{food}}
  {{#each ../drinks as |drink|}}
    {{drink}}
  {{/each}}
{{/each}}

在这里，我们使用 ../ 回溯到定义了 drinks 的父上下文。