javascript - 在 Handlebars "(generated application controller)"helper 中显示 "#each"而不是值内容

Question

我正在 EmberJS 中使用我的 application.hbs 模板，并努力创建一个由模型内容填充的动态下拉菜单。我的路线/模型定义如下:

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      dictionaries: ['One', 'Two', 'Three'],
      test: 'Value'
    });
  }
});

在我的模板中，如果我使用 {{model.test}}，那么它会成功打印 "Value"。 但是:当我尝试使用 model.dictionaries 的值构建列表时，两次尝试都失败了，尽管不同。

这个方法:

{{#each model.dictionaries}}
    <li><a href="#">{{this}}</a></li>
{{else}}
    <li><a href="#" style="font-style: italic;">No values</a></li>
{{/each}}

构建一个包含 3 个条目的列表，但它们的内容是:

<li><a href="#">(generated application controller)</a></li>
<li><a href="#">(generated application controller)</a></li>
<li><a href="#">(generated application controller)</a></li>

如果我尝试为每个项目分配一个名称:

{{#each dict in model.dictionaries}}
    <li><a href="#">{{dict}}</a></li>
{{else}}
    <li><a href="#" style="font-style: italic;">No values</a></li>
{{/each}}

然后不显示值，结果是:

<li><a href="#" style="font-style: italic;">No values</a></li>

我在尝试迭代模型提供的数组时犯了什么错误？

Answer 1

您没有使用each正确的 helper 。 Ember 实际上使用 HTMLBars，它的语法与句柄类似，但引入了一些差异以使数据绑定(bind)更容易。我相信这应该可以解决您的问题:

{{#each model.dictionaries as |somename|}}
    <li><a href="#">{{somename}}</a></li>
{{else}}
    <li><a href="#" style="font-style: italic;">No values</a></li>
{{/each}}

错误说明:

• 在第一次尝试时，您会显示this。在模板中，this 是一个特殊名称，指的是模板所附加到的 Controller 或组件。在这里，它是一个自动生成的 Controller ，这就是您所看到的(这是在生成的 Controller 上调用 toString 的结果)。

• 在你的第二次尝试中......好吧，这应该是一个语法错误，但似乎帮助程序没有检查它收到的参数数量。所以没有错误，但它默默地忽略其他参数。因此，在这里，您最终会使用 3 个参数调用 each 帮助器:变量 dict (未定义)、变量 in (未定义) )和变量 models.dictionaries (这是您的列表，但被助手忽略)。

  由于 dict 未定义，因此执行 else block 。