EmberJS: visualización de una lista de elementos

Puede mostrar la lista de elementos en una matriz utilizando el asistente #each y se repite una vez para cada elemento presente en una matriz.

Sintaxis

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

En el código anterior, la plantilla itera array_name , que incluye objetos y cada elemento de la matriz especificada como block-param .

Ejemplo

El ejemplo que se muestra a continuación muestra una lista de elementos utilizando el asistente #each. Para mostrar los elementos, cree un componente con el siguiente comando:

ember g component group-list

A continuación, abra el group-list.js creado en app / component / junto con el siguiente código:

import Ember from 'ember';

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

Cree una plantilla llamada group-list.hbs en app / templates / con el siguiente código:

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

Para enumerar los elementos de una matriz, use el siguiente código en el archivo application.hbs creado en app / templates / -

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

Salida

Ejecute el servidor ember y recibirá el siguiente resultado: