EmberJS - Affichage d'une liste d'articles

Vous pouvez afficher la liste des éléments dans un tableau à l'aide de l' assistant #each et il effectue une itération une fois pour chaque élément présent dans un tableau.

Syntaxe

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

Dans le code ci-dessus, le modèle itère nom_tableau , qui comprend les objets et chaque élément du tableau spécifié comme paramètre bloc .

Exemple

L'exemple ci-dessous affiche une liste d'éléments à l'aide de l'aide #each. Pour afficher les éléments, créez un composant en utilisant la commande suivante -

ember g component group-list

Ensuite, ouvrez le group-list.js créé sous app / component / avec le code suivant -

import Ember from 'ember';

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

Créez un modèle appelé group-list.hbs sous app / templates / avec le code suivant -

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

Pour lister les éléments d'un tableau, utilisez le code ci-dessous dans le fichier application.hbs créé sous app / templates / -

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

Production

Exécutez le serveur de braises et vous recevrez la sortie suivante -