EmberJS - Visualizzazione di un elenco di elementi

È possibile visualizzare l'elenco di elementi in un array utilizzando l' helper #each e itera una volta per ogni elemento presente in un array.

Sintassi

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

Nel codice precedente, template itera array_name , che include oggetti e ogni elemento nell'array specificato come block-param .

Esempio

L'esempio riportato di seguito mostra un elenco di elementi utilizzando l'helper #each. Per visualizzare gli elementi, creare un componente utilizzando il seguente comando:

ember g component group-list

Quindi, apri il group-list.js creato in app / component / insieme al seguente codice:

import Ember from 'ember';

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

Crea un modello chiamato group-list.hbs in app / templates / con il seguente codice:

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

Per elencare gli elementi da un array, utilizzare il codice seguente nel file application.hbs creato in app / templates / -

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

Produzione

Esegui il server ember e riceverai il seguente output: