Boucles et listes

Les boucles vous permettent de répéter un composant pour chaque élément d'une liste. Définissez l'état spécial __data sur une expression de liste, et Silex clone le composant une fois par élément, en le remplissant avec les données de chaque élément.

C'est ainsi que vous affichez une liste d'articles de blog, un catalogue de produits ou des cartes de membres d'équipe — un modèle de composant, répété pour chaque élément.

Comprendre l'état __data

L'état __data est spécial — il contrôle les boucles.

Lorsque vous définissez __data sur une expression de liste (par exemple, posts), Silex :

1. Évalue l'expression pour obtenir une liste d'éléments
2. Clone le composant une fois par élément
3. Pour chaque clone, définit l'élément comme « courant »
4. Les autres états du composant peuvent référencer l'élément courant

Exemple : posts s'évalue en une liste de 5 articles. Définissez __data sur posts, et le composant apparaît 5 fois sur le canevas, une fois pour chaque article.

Configurer une boucle

Étape 1 : Créer le composant — Ajoutez un composant à votre page (un div, une section carte ou tout conteneur). C'est votre modèle de boucle.

Étape 2 : Designer le modèle — Ajoutez des enfants à l'intérieur (texte pour le titre, image pour l'image mise en avant, lien, etc.). C'est ce qui se répète.

Étape 3 : Créer l'état __data 1. Sélectionnez le composant 2. Ouvrez le panneau Données 3. Cliquez sur Ajouter un état 4. Pour le nom de l'état, entrez __data (sensible à la casse, avec deux tirets bas) 5. Construisez une expression qui renvoie une liste : posts 6. Enregistrez

Le composant se répète désormais une fois par article. Sur le canevas, vous voyez plusieurs clones empilés verticalement (ou arrangés selon votre CSS).

Accéder à l'élément courant dans une boucle

À l'intérieur d'une boucle, « élément courant » désigne les données de ce clone spécifique.

Pour afficher le titre de chaque article dans la boucle :

1. À l'intérieur de votre composant modèle, ajoutez un titre
2. Créez un état innerHTML sur le titre
3. Construisez l'expression — mais comment référencer « l'élément courant » ?

L'élément courant est accessible via une référence d'état. Si votre composant parent (la boucle) a un état public, vous le référencez. Silex appelle cela l'état des éléments ou le contexte de boucle.

Approche simplifiée : Dans l'éditeur d'expressions, après avoir sélectionné votre premier jeton (posts), l'étape suivante vous donne automatiquement accès aux champs individuels des articles. Vous construisez : tout comme first post → title, vous pouvez construire current post → title.

En pratique, si votre boucle est définie sur posts, les composants enfants voient chaque article individuellement. Donc un état comme posts → title à l'intérieur d'une boucle fait automatiquement référence au titre de l'article courant en cours de rendu.

Exemple pratique : liste d'articles de blog

Scénario : vous souhaitez afficher une liste de 5 articles de blog avec titre, extrait et image mise en avant.

1. Ajoutez un Div (le conteneur de boucle)

2. Stylisez-le avec Flexbox : Display Flex, Flex-wrap wrap, Column-gap 20px (optionnel — juste pour la mise en page visuelle)

3. À l'intérieur du Div, ajoutez un Div Carte (une carte d'article) avec :

4. Un titre pour le titre de l'article
5. Un paragraphe pour l'extrait

6. Une image pour l'image mise en avant

7. Sélectionnez le Div Carte et créez l'état __data :

8. Expression : posts

9. La carte se répète désormais 5 fois sur le canevas

10. Pour le titre à l'intérieur de la carte, créez un état :

11. Nom : innerHTML
12. Expression : posts → title

13. Attention — à l'intérieur d'une boucle, cela fait automatiquement référence au titre de l'article courant

14. Pour le paragraphe (extrait) :

15. Nom : innerHTML

16. Expression : posts → excerpt

17. Pour l'image :

18. Nom : src
19. Expression : posts → featured_image → url
20. Nom : alt

21. Expression : posts → featured_image → alt

22. Activez l'aperçu — vous voyez désormais 5 cartes d'articles de blog sur le canevas, chacune remplie avec des données différentes.

Boucles imbriquées

Vous pouvez imbriquer des boucles dans des boucles. Par exemple, afficher chaque article avec une liste de commentaires à l'intérieur.

Configuration : 1. Composant extérieur (boucle 1) : __data = posts 2. À l'intérieur, ajoutez un composant pour les commentaires (boucle 2) : __data = current_post → comments 3. Chaque commentaire a accès à son article parent

L'imbrication fonctionne car la boucle interne définit son propre contexte.

Limiter les résultats de boucle avec des filtres

Au lieu de répéter tous les articles, vous pourriez ne vouloir que les 3 premiers, ou uniquement les articles d'une certaine catégorie.

Modifiez votre expression __data :

• posts → slice → (0, 3) — uniquement les 3 premiers articles
• posts → where (category = "news") — uniquement les articles de la catégorie actualités
• posts → reverse — articles dans l'ordre inverse

Les filtres sont appliqués avant le rendu de la boucle, donc vous ne répétez que les éléments qui correspondent.

Index et position de boucle

À l'intérieur d'une boucle, vous pourriez vouloir afficher la position (1er, 2e, 3e article).

Silex fournit un état spécial __index sur chaque clone. Vous pouvez le référencer pour afficher ou styliser conditionnellement les éléments :

• Utilisez __index pour appliquer des styles différents au premier élément
• Affichez __index + 1 pour montrer "1 sur 5" (car l'index commence à 0)

Comportement de l'aperçu dans les boucles

Lors de l'aperçu, Silex récupère les données en direct et affiche les clones sur le canevas. Vous pouvez voir :

• Comment la mise en page apparaît avec du vrai contenu
• Si le texte passe à la ligne ou déborde
• Si les images s'affichent correctement

Si vous avez 100 éléments dans la boucle, Silex peut n'afficher que les 10 premiers environ sur le canevas pour des raisons de performance. La liste complète est rendue lors de la publication.

Erreurs courantes

• Oublier de définir __data. Un composant régulier ne boucle pas sauf si vous définissez l'état spécial __data.
• Utiliser un scalaire au lieu d'une liste. __data doit être une expression de liste. Le définir sur posts → first (un seul article) ne créera pas de boucle.
• Essayer d'afficher l'objet entier. Si __data = posts, et que vous essayez ensuite d'afficher posts dans un enfant, cela affiche "[object Object]". Naviguez plutôt vers un champ scalaire : posts → title.
• Oublier de designer le modèle. Ajoutez des enfants au composant de boucle avant de définir __data. Si vous définissez __data sur un div vide, il répète un div vide.

En savoir plus

• Lier les données — créer des états en général
• Expressions — comprendre comment chaîner les jetons
• Conditions — masquer/afficher des éléments dans une boucle en fonction des données
• Filtres — transformer les listes (slice, where, reverse, sort, etc.)

---

Quiz

Q1 : Vous souhaitez répéter un composant pour chaque article de votre blog. Quel état spécial créez-vous ?

• A) loop
• B) __data
• C) items

Réponse

B) __data — L'état spécial __data (avec deux tirets bas) contrôle les boucles. Lorsque vous le définissez sur une expression de liste, le composant se répète une fois par élément.

Q2 : À l'intérieur d'une boucle, vous souhaitez afficher le titre de chaque article. Quelle expression utilisez-vous ?

• A) posts → title (le titre de chaque article)
• B) title (le titre de l'article courant, implicitement)
• C) current → title (l'élément courant)

Réponse

A) posts → title — Même à l'intérieur d'une boucle, vous construisez l'expression complète. À l'intérieur d'une boucle, cette expression est évaluée pour chaque élément, donc elle fait référence au titre de l'article courant.

Q3 : Votre boucle a __data = posts, mais elle ne se répète pas. Quel est le problème le plus probable ?

• A) posts est vide (pas d'articles dans votre API)
• B) Vous avez défini __data sur un seul élément au lieu d'une liste
• C) L'aperçu est désactivé

Réponse

A) posts est vide (pas d'articles dans votre API) — Si l'expression s'évalue en une liste avec des éléments, la boucle se répète. Vérifiez votre API pour confirmer que des articles existent. Si l'expression renvoie un seul élément (B), ce serait incorrect et causerait une erreur.

Q4 : Vous souhaitez que seuls les 3 premiers articles se répètent dans la boucle. Sur quoi définissez-vous __data ?

• A) posts → first → slice(0,3)
• B) posts → slice(0,3)
• C) first posts → 3

Réponse

B) posts → slice(0,3) — Le filtre slice réduit une liste à une plage. Il prend un index de début et de fin (début à 0, fin à 3 = 3 premiers éléments).

Q5 : Vous avez une boucle d'articles de blog, et à l'intérieur de chaque article, vous souhaitez afficher les commentaires. Comment configurez-vous l'imbrication des boucles ?

• A) Créer un état __data sur le composant d'article avec comments
• B) Créer un état __data sur le composant d'article avec posts → comments
• C) Vous ne pouvez pas imbriquer des boucles dans Silex

Réponse

A) Créer un état __data sur le composant d'article avec comments — La boucle interne accède au champ commentaires de l'article courant. Comme la boucle externe définit le contexte de l'article, la boucle interne peut directement référencer comments (les commentaires de l'article courant).