Lier les données

Une fois que vous avez connecté une source de données, vous la liez aux composants en créant des états et des expressions. Cette page vous montre le flux de travail étape par étape dans l'éditeur.

L'idée centrale : sélectionnez un composant, créez un état (une expression nommée), et les données apparaissent sur le canevas en temps réel.

Créer un état

1. Sélectionnez un composant sur le canevas (bloc de texte, image ou conteneur)
2. Ouvrez le panneau Données dans la barre latérale droite
3. Cliquez sur Ajouter un état ou le bouton plus
4. Entrez un nom (par exemple, "Titre de l'article")
5. Choisissez Public ou Privé — généralement Privé pour les données spécifiques au composant
6. Un éditeur d'expressions s'ouvre

Construire une expression avec l'éditeur visuel

L'éditeur d'expressions est un flux de jetons que vous construisez étape par étape.

Étape 1 : Choisir une propriété de la source de données - Cliquez sur Ajouter un jeton - Sélectionnez Propriété - Dans la liste, choisissez un champ de votre API (par exemple, Posts) - Vous avez maintenant le premier jeton : posts

Étape 2 : Ajouter des filtres ou naviguer plus profondément - Cliquez à nouveau sur Ajouter un jeton - Sélectionnez Filtre pour transformer les données, ou Propriété pour naviguer vers un champ lié - Exemple : si posts est une liste, ajoutez le filtre first pour obtenir un seul article - Votre expression est maintenant : posts → first

Étape 3 : Continuer à chaîner - Cliquez à nouveau sur Ajouter un jeton - Ajoutez la propriété title pour extraire le titre de l'article - Expression finale : posts → first → title

Aperçu en direct — Au fur et à mesure que vous construisez, Silex récupère les données en direct depuis votre API et vous montre le résultat sur le canevas.

Lier au innerHTML (afficher du texte)

L'état le plus courant est innerHTML — le contenu HTML d'un élément.

Pour afficher un titre d'article de blog :

1. Ajoutez un composant de titre à votre canevas
2. Ouvrez le panneau Données et cliquez sur Ajouter un état
3. Nommez-le innerHTML (c'est un nom d'état spécial qui contrôle quel texte apparaît)
4. Construisez une expression : posts → first → title
5. Lorsque vous terminez, le titre sur le canevas affiche le titre réel de votre API

Le titre affiche désormais des données en direct au lieu de texte d'espace réservé.

Lier aux attributs HTML (liens, images, texte alternatif)

Au-delà du contenu, vous pouvez lier des données aux attributs HTML comme href, src et alt.

Lier un lien : 1. Sélectionnez un composant de lien 2. Ouvrez le panneau Données 3. Cliquez sur Ajouter un état 4. Nommez-le href (le nom de l'état correspond à l'attribut HTML) 5. Construisez une expression qui produit une URL : posts → first → link 6. Le lien pointe désormais vers de vraies URL d'articles de votre API

Lier une source d'image : 1. Sélectionnez un composant image 2. Créez un état nommé src 3. Construisez une expression : posts → first → featured_image → url 4. L'image affiche désormais l'image mise en avant de votre API

Lier le texte alternatif : 1. Créez un état nommé alt 2. Construisez une expression : posts → first → featured_image → alt 3. Les technologies d'assistance disposent désormais de descriptions appropriées

Comprendre les types d'états

Les états peuvent être :

États publics — visibles et réutilisables par les composants enfants. Utiles si vous souhaitez qu'un composant parent définisse des données auxquelles les éléments enfants accèdent.

États privés — uniquement pour ce composant. La plupart de vos états seront privés. Les états privés spéciaux incluent :

• innerHTML — contrôle le contenu texte/HTML
• condition — contrôle la visibilité (afficher/masquer)
• condition2 — une autre condition pour de la logique combinée
• __data — contrôle les boucles (voir Boucles)

Modifier un état

Une fois créé, vous pouvez modifier l'expression de l'état à tout moment :

1. Dans le panneau Données, trouvez l'état
2. Cliquez sur le nom de l'état ou une icône de modification
3. L'éditeur d'expressions s'ouvre à nouveau
4. Changez les jetons, ajoutez des filtres, reconstruisez la chaîne
5. Cliquez sur Enregistrer
6. L'aperçu se met à jour immédiatement

Flux de travail courant : afficher les détails d'un article

Scénario : vous avez une page de blog. Vous souhaitez afficher le titre, la date et l'image mise en avant de l'article le plus récent.

1. Ajoutez un Titre à votre page
2. Créez un état innerHTML → expression : posts → first → title

3. Le titre affiche le titre de l'article

4. Ajoutez un Paragraphe pour la date

5. Créez un état innerHTML → expression : posts → first → date

6. Le paragraphe affiche la date de publication

7. Ajoutez une Image

8. Créez un état src → expression : posts → first → featured_image → url
9. Créez un état alt → expression : posts → first → featured_image → alt
10. L'image affiche l'image mise en avant avec le texte alternatif approprié

Les trois éléments sont désormais liés au même article (le premier) et se mettent à jour ensemble si l'article change.

Activer l'aperçu en direct

Si vous ne voyez pas de données en direct sur le canevas, l'aperçu est peut-être désactivé :

1. Cherchez un bouton d'aperçu (généralement dans la barre d'outils ou le panneau Données)
2. Cliquez pour l'activer
3. Les données de votre API devraient apparaître immédiatement

L'aperçu récupère les données réelles de votre API à chaque modification, donc vous designez avec du vrai contenu.

Erreurs courantes

• Utiliser le mauvais nom d'état. innerHTML est spécial et contrôle le contenu ; des noms personnalisés comme postTitle n'afficheront rien sauf si vous les référencez ailleurs.
• Construire une expression qui renvoie le mauvais type. Si vous liez un nombre au innerHTML, cela affiche "5", pas une erreur — mais visuellement cela peut ne pas avoir de sens. Vérifiez quel type votre expression produit.
• Oublier d'activer l'aperçu. Si vous liez des données mais ne les voyez pas sur le canevas, activez le bouton d'aperçu.
• Créer des états en double. Silex permet plusieurs états sur un composant, mais chacun devrait avoir un nom et un objectif uniques.

En savoir plus

• Expressions — comprendre les jetons et les chaînes
• Boucles et listes — répéter des composants avec l'état __data
• Conditions — afficher/masquer des composants avec condition
• Filtres — référence de tous les filtres de transformation de données disponibles

---

Quiz

Q1 : Vous souhaitez afficher un titre d'article comme titre. Quel nom d'état créez-vous ?

• A) postTitle
• B) innerHTML
• C) content

Réponse

B) innerHTML — L'état innerHTML contrôle le contenu HTML d'un élément. Les noms personnalisés comme postTitle n'affichent rien automatiquement ; vous devriez avoir d'autres composants qui les référencent.

Q2 : Vous liez l'image mise en avant d'un article de blog à un composant image. Combien d'états devez-vous créer ?

• A) Un état pour l'URL de l'image
• B) Deux états — un pour l'URL et un pour le texte alternatif
• C) Trois états — URL, alt et titre

Réponse

B) Deux états — un pour l'URL et un pour le texte alternatif — Créez un état nommé src avec l'URL de l'image et un état nommé alt avec le texte alternatif. Cela couvre l'affichage et l'accessibilité.

Q3 : Vous avez créé un état, mais les données en direct ne s'affichent pas sur le canevas. Quelle est la première chose à vérifier ?

• A) L'aperçu est désactivé
• B) Votre API est hors service
• C) Vous devez rafraîchir le navigateur

Réponse

A) L'aperçu est désactivé — Cherchez un bouton d'aperçu dans la barre d'outils ou le panneau Données. Sans l'avoir activé, les expressions sont enregistrées mais pas évaluées avec les données en direct.

Q4 : Vous souhaitez rendre un état disponible pour les composants enfants. Quel type choisissez-vous ?

• A) Privé
• B) Public
• C) Global

Réponse

B) Public — Les états publics sont exposés aux composants enfants. Les états privés sont uniquement pour le composant lui-même. Si les enfants ont besoin d'accéder aux données, rendez-les publiques.

Q5 : Vous avez créé un état avec l'expression posts → first → author. Quel type de valeur cela renvoie-t-il ?

• A) Une chaîne (le nom de l'auteur)
• B) Un objet (l'auteur avec des champs comme name, email, bio)
• C) Une liste d'auteurs

Réponse

B) Un objet (l'auteur avec des champs comme name, email, bio) — Le champ auteur est probablement un objet avec plusieurs sous-champs. Pour obtenir spécifiquement le nom de l'auteur, vous étendriez l'expression : posts → first → author → name.