Dans ce cours
Améliorez votre vitesse de développement grâce aux répéteurs et aux données dynamiques. Vous n'aurez plus à mettre à jour manuellement votre code statique. Nous apprendrons ce que sont les répéteurs, comment ils sont structurés, comment les formater, les alimenter en données et comment les mettre à jour afin de vous aider à coder plus intelligemment et plus rapidement avec Velo.
Ce que vous allez apprendre
L'ensemble du cycle de vie du répéteur, y compris la façon de créer, supprimer, formater, ajouter, modifier et mettre à jour les données du répéteur
Comment créer votre propre liste personnalisée d'éléments à l'aide du code
Comment créer et formater des mises en page répétitives dynamiques
Comment personnaliser la fonctionnalité de vos répéteurs
Les meilleures pratiques pour connecter les répéteurs avec les API Wix et d'autres API frontend tierces
![Still frame from the Velo by Wix course: Joshua Alphonse, Wix Developer Advocate](https://static.wixstatic.com/media/dc84c1_ec6ec42f026645c3ad7f764fa62ea8ab~mv2.png/v1/fill/w_501,h_656,al_c,q_85,enc_auto/Screen%20Shot%202022-11-13%20at%2012_23_02.png)
![](https://static.wixstatic.com/media/dc84c1_ea2697e2298a4fb2b0dd52972b667bbf~mv2.png/v1/fill/w_354,h_432,al_c,q_85,enc_auto/Gradient%20Speaker.png)
Joshua est un créateur digital et porte-parole des développeurs de Wix.com. Il est passionné à l'idée de résoudre des problèmes, créer de la musique et apprendre aux développeurs comment réussir en ligne.
Porte-parole des développeurs Wix
Dans ce cours
Joshua Alphonse
Qui est concerné
Aux développeurs expérimentés qui veulent utiliser des répéteurs avec du code
Aux développeurs expérimentés avec les répéteurs et qui cherchent à les déployer en utilisant Velo
Ressources pour vous aider à vous développer
Trouvez des articles utiles, des modèles pratiques et bien plus encore pour mettre vos compétences en pratique.
-
Loading...
-
Loading...
-
Loading...
-
Loading...
Premiers pas avec les 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.
{title}
Prep for your exam with free video courses and lessons