Découvrir Ember.js

Régler les paramètres

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Ouvrez votre composant au monde extérieur. Vous allez lui permettre de recevoir des données venant du template.
04:19

Transcription

Maintenant que notre premier composant a été créé, nous allons faire en sorte de pouvoir lui transférer des données. Comme je vous le disais, il ne peut pas lire les données qui sont dans la route dans laquelle il a été inséré. Il doit vraiment être autonome. Ça paraît logique puisque là il est dans cette route là, mais rien n'empêche qu'on le réutilise ailleurs. Donc les données ne seraient pas forcément les mêmes, et ça ne paraîtrait pas logique qu'il puisse aller lire depuis son code, des données externes qu'il ne maîtrise pas, qui peuvent être modifiées, qui peuvent ne pas être présentes, etc. Pour lui faire passer ces données, cela va fonctionner comme des paramètres. Le principe consiste ici à marquer le nom du paramètre pour la carte du groupe, pour le composant, « égal » la valeur que l'on veut lui transmettre. Donc par exemple, on va dire, un paramètre groupe sera égal à, dans ce contexte là puisque je suis dans la route de mon groupe, mais c'est le modèle qui représente le groupe. Une fois que j'ai fait ça, dans ma carte, je pourrai utiliser directement la variable groupe. Alors on pourrait l'utiliser directement dans le template, je trouve que ce n'est pas très clair en faisant comme ça. J'aime bien vraiment dans l'idée, de garder ce composant autonome, bien lister les propriétés qui y sont présentes. Donc, par exemple, je sais que j'ai une propriété groupe qui peut arriver. Par défaut, il va être « undefined », comme ça, quand je code mon composant, que je mets côte à côte le Javascript et le Hbs, je comprends ici que je peux mettre group puisqu'il y a une propriété group qui est disponible. Donc je lui dirai group.title, et on enregistre. On va aller voir notre page, et là cette fois-ci on voit qu'il a bien réussi à récupéré « famille ». Alors c'est intéressant, puisque l'on a un paramètre qui a « « undefined » », et ensuite on s'en sert en disant ce paramètre.title, mais il ne va pas rester « « undefined » », c'est à dire que c'est la valeur par défaut si personne ne le précise, mais comme ici on a dit que group est égal à quelque chose, il va remplacer ce « « undefined » » par model. Alors encore une fois, ça on aurait pu s'en passer. D'ailleurs si je le commente et que j'enregistre, ça marche aussi. Mais je trouve que si je l'enlève, ça voudrait dire que je dois découvrir, au niveau du template, quels sont les paramètres en allant voir les endroits où on l’appelle, ce qui ne paraît pas logique du tout. Je trouve personnellement qu'il est bien de lister ici tous les paramètres, et en plus ça aide quand vous voulez utiliser un composant. Il vous suffit d'aller voir le js, et vous verrez les différents paramètres que vous pouvez lui passer. Maintenant que nous avons notre composant de créé, nous allons l'améliorer un peu pour le rendre un petit peu plus joli. Je vais d'abord ajouter une règle CSS. Alors je l'avais déjà ajoutée pour gagner un petit peu de temps, puisqu'on est pas là pour faire un cours de CSS, qui va nous permettre d'afficher une image en grand si les proportions de l'image ne correspondent pas aux proportions de la vue, que ça coupe les bords de l'image pour qu'elle soit toujours en grand mais qu'elle ne soit pas déformée. Un petit peu comme le principe du 16/9ème. Et dans le Hbs, je vais ajouter cette ligne, en disant j'ajoute une division avec la classe que je lui ai fournie, que je vous ai montrée dans le CSS. Comme style, je suis obligé, pour avoir cette gestion de l'image, de le passer sous la forme de background. Donc j'ajoute un style, comme j'aurais fait pour n'importe quel autre style. Et, si je dois ajouter des données variables à l'intérieur, je peux utiliser les handlebars, et encore une fois si je fais référence à group, ça ira chercher dans group-card.js s'il n'y a pas une variable group, et donc là ça ira chercher le titre en haut, et l'image en dessous. On va enregistrer. Voilà donc on a notre élément, alors je vais faire aussi ça un petit peu différemment. Alors je voulais vous montrer un dernière chose au niveau justement des paramètres. C'est au lieu d'utiliser le titre de cette façon là, je vais le laisser affiché, et je vais vous montrer autre chose, en utilisant un champs texte. Alors, vous avez un handlbar spécial pour ça, ça s’appelle un input helper, qui est fourni avec Ember. « input value = group.title » Donc j'ai bien mon affichage qui est en haut. On va mettre h2. Voilà, donc j'ai le groupe « famille ». Si je vais sur « amis », on a bien le groupe « amis ». Vous voyez, quand on arrive au début, on a que la liste. Quand je clique, je rentre à l'intérieur. Et là j'ai mon input. Si je modifie ici mon texte, on voit que ça se met à jour partout. Regardez au dessus, mais aussi ici. C'est le gros avantage d'Ember, c'est que toutes les données sont liées, et si vous faites une modification, elle se modifie partout.

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 !