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（例如 < 1.13.x），并且禁用原型扩展，则还需要使用Ember.Array的实例而不是本机数组。 你可以通过像这样包装错误数组来做到这一点。

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