Codage avec Velo : répéteurs

Dans cette leçon, nous allons parler des répéteurs, découvrir en quoi ils consistent et comment les utiliser.

Si vous avez une liste d’éléments que vous souhaitez afficher sur la page de manière ordonnée et claire, un répéteur peut vous aider à le faire.

Des données peuvent passer par les répéteurs de façon dynamique ou statique, et tout au long de ce cours, nous allons vous montrer comment faire les deux.

Un répéteur est donc une liste d’éléments qui sont visuellement définis et que vous pouvez afficher tout en ayant plusieurs éléments qui se répètent.

Disons que je veux afficher la liste des employés qui travaillent dans le cadre d’un projet.

Sur cet écran, je peux avoir une liste de personnes avec le même design, leurs noms sont dans la même police, et même si je rajoute des éléments dans la page ou sur le répéteur, les éléments se répéteront pour toutes les autres listes d’éléments, en gardant le même design.

Si j’ajoute ce bouton au premier répéteur ici et que j’attache cet élément, tous les autres éléments de répéteurs auront ceci.

Ceci nous amène à la structure du répéteur.

Le répéteur, comme je l’ai dit, est une liste d’éléments visuels que vous pouvez organiser de façon claire et attrayante.

Ainsi, si je fais un glisser-déposer ici, tous les autres éléments suivent.

Nous pouvons même venir ici et développer un peu notre répéteur, au-dessus de l’espace de ces zones également.

Ouvrons ce conteneur.

Déplacez-le vers le bas, et vous verrez que chaque élément va suivre le design juste après ce premier élément.

Les répéteurs peuvent stocker des données dynamiques et des données statiques.

Ainsi, tout au long de ce cours, nous allons apprendre à utiliser des services tiers pour alimenter un répéteur et même des données statiques que vous avez stockées directement dans votre code front-end.

Pour apprendre à connaître ces répéteurs tout au long de ce cours, vous allez devoir avoir une certaine expérience du développement de back-end et aussi de front-end.

Je vous invite donc à regarder les deux autres cours sur le front-end et le back-end.

Maintenant, nous allons enlever ce bouton et repasser sur le répéteur.

Un répéteur peut donc être alimenté de plusieurs manières différentes.

Vous pouvez faire cela de manière programmatique ou vous pouvez même travailler avec l’ensemble de données et le gestionnaire de contenu aussi.

Tout au long de ce cours, nous n’allons pas parler de la configuration des données et du gestionnaire de contenu, nous allons nous concentrer principalement sur le code.

Je peux tout simplement glisser et déposer un répéteur sur la page et je peux aussi identifier ce répéteur.

Donc, si je vais ici et que j’ouvre mon panneau de code, une fois que j’ai activé le mode développeur, je peux sélectionner ce répéteur et changer son nom.

Ainsi, le répéteur de ma planète est un élément de page en soi, mais il contient de nombreux autres éléments de page qui se répètent eux-mêmes.

Je peux ainsi lister mes éléments de façon claire et organisée.

Il y a plusieurs gestionnaires d’événements que je peux ajouter pour la répétition.

J’ai « item onReady », « item onRemoved », « mouseIn », « mouseOut ».

Tout au long de ce cours, nous allons vous montrer comment utiliser « item onReady » et « item removed », parce qu’il s’agira des principales fonctionnalités que vous utiliserez pour afficher vos données sur votre répéteur.

Dans notre prochaine leçon, nous allons apprendre comment ajouter des données statiques à votre répéteur, comme vous le voyez ici sur notre identifiant.

Nous allons vous montrer exactement comment importer toutes ces données directement dans un répéteur.

Nous verrons cela dans la prochaine leçon.