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

Ember js display each item in javascript array in {{#each}} helper

本文关键字：数组 javascript js #each Ember 显示      更新时间：2023-09-26

我正在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对象，会有帮助吗？

是的，这是正确的语法：

<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预闪烁（例如<1.13.x），那么如果您禁用了原型扩展，则还需要使用Ember.Array的实例而不是本机数组。只需像这样包装error数组就可以做到这一点。

let errors = Ember.A([ ... the same as before ... ])
相关文章：