EmberJS — 显示项目列表

你可以使用 #each 助手来显示数组中的项目列表，它对数组中存在的每个项目迭代一次。

语法

<ul>
   {{#each array_name as |block-param| }}
      <li>{{block-param}}</li>
   {{/each}}
</ul>

在上方的代码中，模板迭代 array_name，其中包括作为 block-param 指定的数组中的对象和每个项目。

范例

下方给出的范例使用 #each 助手来显示项目列表。要显示项目，请使用以下命令创建组件 −

ember g component group-list

接下来，打开 app/component/ 下创建的 group-list.js 及以下代码 −

import Ember from 'ember';

export default Ember.Component.extend ({
   arrayOFgroup:['apple','pineapple','banana']
});

在 app/templates/ 下创建一个名为 group-list.hbs 的模板，其中包含以下代码 −

<ul>
   {{#each arrayOFgroup as |fruit|}}
      <li>{{fruit}}</li>
   {{/each}}
</ul>

要从数组中列出项目，请使用 app/templates/ 下创建的 application.hbs 文件中的以下代码 −

<p>List of Items:</p>
{{group-list}}
{{outlet}}

输 出

运行 Ember 服务器，你将收到以下输出 −