EmberJS - Exibindo uma lista de itens

Você pode exibir a lista de itens em uma matriz usando o #each helper e itera uma vez para cada item presente em uma matriz.

Sintaxe

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

No código acima, template itera array_name , que inclui objetos e cada item no array especificado como block-param .

O exemplo fornecido a seguir exibe uma lista de itens usando o #each helper. Para exibir os itens, crie um componente usando o seguinte comando -

ember g component group-list

Em seguida, abra o group-list.js criado em app / component / junto com o seguinte código -

import Ember from 'ember';

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

Crie um modelo chamado group-list.hbs em app / templates / com o seguinte código -

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

Para listar os itens de uma matriz, use o código abaixo no arquivo application.hbs criado em app / templates / -

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

Execute o servidor ember e você receberá a seguinte saída -

↰ Previous page