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 伺服器，你將收到以下輸出 −