Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Ember.js

Créer et utiliser un composant

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez apprendre à réaliser votre premier composant. Voyez également comment l'utiliser dans un de vos templates.
03:36

Transcription

Nous allons maintenant voir ce que sont ses composants. Je vous en ai parlé plusieurs fois depuis le début de cette formation, le principe des composants est de créer une page avec plusieurs modules. Chaque composant va avoir à faire une tâche bien précise, et sera entièrement autonome. On pourra lui faire passer des données si on le souhaite, et s'il a besoin il pourra nous renvoyer des informations sur ce qui vient de se passer, ce que l'on appelle des Actions. On le verra plus tard. Pour commencer, nous allons essayer de transformer cette partie là en composant. Voici la partie que nous avons pour le moment. Nous avons un template, avec l'affichage du groupe qui pour l'instant est très basique, on affiche que le titre, et ensuite l'outlet pour envoyer vers la route suivante. Ce que nous allons transformer en composant c'est ceci, et nous le feront d'ailleurs évoluer pour ajouter plus d'informations sur notre groupe. Pour générer un composant, il vous suffit d'aller dans votre ligne de commande, et de taper Ember. Alors, il faut vous placer bien-sûr dans le dossier de votre projet. Moi je suis toujours dans le même dossier donc il n'y a pas besoin de changer. Generate, exactement la même commande que ce que l'on utilisait pour les routes. Rappellez-vous, on faisait « ember generate route », et ensuite le nom de la route. Donc là on va faire «ember generate component», et le nom du composant, nous on va l'appeler «group-card», on va faire une espèce de carte du groupe, ce sera le titre et l'image du groupe. Le générateur va créer plusieurs fichiers pour nous. Un premier fichier group-card.js, dans le dossier Components. Ce sera finalement le code Javascript qui va gérer ce composant. C'est un petit peu le contrôleur du composant, on peut appeler ça. Et ensuite on a group-card.hbs, qui est un template, puisqu'il est dans le dossier template components et notre fichier. Ensuite, il y a un test qui est généré, un fichier test automatique. Maintenant, lorsqu'on revient dans Sublime, on voit notre projet, et si on ouvre les dossiers, par exemple dans app components, on voit qu'il y a bien le ficher group-card.js qui a été créé, et dans templates il y a un sous-dossier components, et là on voit group-card.hbs. Donc on a notre composant qui est prêt à être utiliser. A l'intérieur de group-card.hbs, il y a un mot-clé yield, qu'on a pas encore vu que l'on verra très bientôt. Ce que je vais faire, je vais séparer mon affichage en deux, pour pouvoir mettre le HBS ici, et ici je vais ouvrir group-card.js. Voilà, comme ça on a d'un côté le code, d'un côté le HBS. Donc le principe va vraiment être très simple, vous concevez ici l'interface comme vous auriez fait dans un template normal, et vous pouvez vous appuyer sur du code qui est ici, sous des propriétés qui sont ici, et grâce au Handlebar, vous allez pouvoir faire le lien entre les deux. Pour notre partie, ça va être très simple. On va se contenter de prendre ça pour l'instant, et de le mettre ici. Si je vais dans ma page, pour l'instant je ne verrai rien. Je suis bien, par exemple, sur Famille. Et au lieu d'avoir la Famille ici j'ai du blanc. Pourquoi ? Parce que j'ai supprimé d'ici ce que l'on avait pour le mettre dans le composant. Mais je n'ai pas encore utilisé le composant. Pour utiliser un composant, c'est là aussi très simple, il vous suffit de faire HandleBar, et le nom de votre composant, group-card. Voici un groupe. Alors effectivement, ça ne marche pas encore. On va voir ça au prochain chapitre. Mais on a notre composant qui est utilisé, mais il n'est pas capable d'afficher model.title, pusique effectivement model c'est quelque chose qui appartenait à notre route group, et qui par contre n'existe pas dans ce template. La raison pour laquelle ça n'existe pas, que les composants doivent être isolés. On doit leur faire passer uniquement les données qu'ils ont besoin et ils peuvent pas aller lire les données qui ne leur appartiennent pas, c'est à dire ceux de la route dans laquelle ils sont. Ce que l'on va voir au prochain chapitre, c'est comment lui transférer des données.

Découvrir Ember.js

Créez vos composants et mettez en page vos sites avec une facilité déconcertante avec Ember.js. Apprenez à créer des routes et à charger vos modèles depuis un service web externe.

2h57 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 mars 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !