EmberJS-アイテムのリストの表示

_＃each_ヘルパーを使用して配列内のアイテムのリストを表示でき、配列内に存在する各アイテムに対して1回反復します。

構文

<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}}

エンバーサーバーを実行すると、次の出力が表示されます-