Ember js在{{#each}}帮助器中显示javascript数组中的每个项目

Question

我在 ember 组件中创建以下数组变量，并将其传递给我的模板文件的控制器。

let errors = [
  "Line 2 needs a tab separator.",
  "Line 42 is empty.",
  "Line 43 is empty.",
  "Line 44 is empty.",
  "Line 45 is empty.",
  "Line 46 is empty.",
  "Line 47 is empty."
];

在控制器中，我正在为这个数组值设置一个属性：

this.set('errorList', errors);

然后我可以在模板文件中显示数组：

{{controller.errorList}}

问题是错误显示为一个长字符串，如下所示：

第2行需要制表符分隔符，第42行为空，第43行为空，第44行为空，第45行为空，第46行为空，第47行为空。

是否可以使用 {{#each}} 助手来显示每个项目，从而能够添加 HTML 标记 - 例如：

<ul>
{{#each **** as |***|}
 <li>***Display each individual error here.***</li>
{{/each}}
</ul>

如果我能够将数组变量转换为 JSON 对象会有帮助吗？

Answer 1

是的，这是正确的语法：

<ul>
{{#each errorList as |error|}
  <li>{{error}}</li>
{{/each}}
</ul>

如果你像上面那样定义你的数组，你也会遇到一堆语法错误。数组应如下所示。

let errors = [
  "Line 2 needs a tab separator.",
  "Line 42 is empty.",
  "Line 43 is empty.",
  "Line 44 is empty.",
  "Line 45 is empty.",
  "Line 46 is empty.",
  "Line 47 is empty."
];

如果您使用的是 Ember pre-glimmer（例如 Ember.Array 的实例而不是原生数组。你可以通过像这样包装错误数组来做到这一点。

let errors = Ember.A([ ... the same as before ... ])