Découvrir Ember.js

Comprendre les composants imbriqués

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez apprendre à utiliser des composants à l'intérieur d'autres composants. Il s'agit de rendre votre code encore plus modulaire.
07:01

Transcription

Voyons maintenant comment faire pour utiliser un composant au sein d'un autre composant. Par exemple, toutes ces fonctionnalités de suppression et de confirmation pourraient faire l'objet d'un composant à part. Puisque c'est quelque chose qu'on aura peut-être souvent besoin, pas que pour un groupe, peut-être après pour un contact, pour plein d'autres choses on en aura besoin. Donc ça serait bien de l'isoler, pour vraiment essayer de faire, toujours dans cette logique, de faire du modulaire. Je vais ouvrir mon terminal alors ember generate control non, component, voilà on avait groupCard, je vais faire confirm button Il m'a généré tous mes fichiers. Donc ce que je vais faire, je vais prendre tout ceci, je vais le couper et ouvrir confirmButton.hbs, c'est celui-ci voilà Ensuite, je vais ouvrir le confirmButton.js et je vais déplacer les actions qui sont là. On va faire un copier, on verra après ce qu'on garde. alors je vais prendre aussi tout ça Voilà, on va prendre aussi le should confirm égal false, qui finalement n'a plus rien à faire ici. Et on va le mettre ici. Ok, donc quand on clique sur le bouton supprimer, ça va appeler ça. Le if devrait marcher, Ok, donc lui doit être fonctionnel, maintenant on va modifier un petit peu notre groupCard pour qu'il se serve de ce confirm button. Tout ce qu'on a à faire dans le template, c'est appeler le composant confirm button, on va le laisser ici et par contre, dans le js, il va falloir faire en sorte que ce confirm button puisse nous envoyer une action, qui corresponde à ce qu'on faisait ici. Alors, on va faire, onConfirm l'action s'appelera comme ça. Je veux appeler la méthode, je vais appeler l'action, delete button pressed Voilà, donc quand la personne aura confirmé sur le bouton de confirmation Je veux que ça exécute delete button pressed ici, c'est le nom qui me parait le plus logique puisque finalement on ne se préoccupe plus maintenant de la notion de confirmation À ce niveau là, on se préoccupe uniquement de la notion de suppression. C'est à dire que si la personne a confirmé, ça veut dire qu'elle a cliqué deux fois sur le bouton supprimé. Donc quand il y a une confirmation sur ce bouton, ça veut dire qu'on a appuyé sur le bouton supprimé, et donc on fait passer l'événement au parent. pour dire on supprime le groupe. Maintenant, on va aller dans le confirm button, et vérifier qu'on a bien une action qui correspond à ça, ce qui n'est pas le cas pour l'instant, donc je vais ajouter on. confirm Alors encore une fois, ça c'est pas obligatoire ce que je fais, je trouve que c'est mieux de lister dans le fichier js tout ce que vous pouvez recevoir comme paramètre. Et ici, ça sera onConfirm voilà, je vais le renommer, petite info quand vous utilisez Sublime, mais je crois que c'est pareil sur ATOM, en faisant commander plusieurs fois, voyez, ça sélectionne plusieurs éléments, confirmAction, voilà, et voilà, bien ça doit être pas mal, on va voir si j'ai rien oublié, on va le lancer. Alors j'ai supprimé annuler, ça, ça marche et si je confirme, voilà tout à marcher ! Donc on a gardé la même fonctionnalité, Maintenant ce qu'on peut faire c'est améliorer encore un petit peu ce bouton de confirmation puisque il est un peu trop centré sur la suppression. On pourrait avoir besoin de quelque chose d'un petit peu générique, qui permettrait, si on précise rien, de faire une suppression éventuellement, mais ce qui serait bien ce serait que l'utilisateur, c'est à dire le template qui fait appel à ce composant, puisse préciser le texte à afficher sur le bouton, plutôt que supprimer, pouvoir le préciser. Ce qu'on va faire, on va juste ajouter button text, On peut mettre par défaut si on veut supprimer, on n'est pas forcé à l'insérer si on le souhaite, et ici, au lieu de mettre supprimer, on va mettre button text. Donc ça marche pour l'instant, puisque j'ai mis la valeur par défaut. Ce qui est sympa avec ça, c'est que je vais pouvoir si je le souhaite, changer directement le texte du bouton. button text est égal, je vais marquer test et on voit, voyez, test annuler confirmer On garde la même fonctionnalité mais en changeant le texte du bouton. je vais enlever le test ici, On va mettre en forme ce bouton pour qu'il soit un petit peu plus sympa. Alors déjà le delete on va appeler ... original button pressed ça me parait être pas mal comme nom, qui correspond donc à ça. Et puisque on utilise bootstrap, on va mettre en forme un petit peu ces boutons, pour que ce soit un petit peu plus joli. Donc vous avez des classes dans Bootstrap qui permettent de mettre en forme les boutons rapidement, donc BTN pour passer sur un bouton, et après on a plusieurs types de boutons, par exemple, puisque c'est une confirmation, ce sera sûrement quelque chose avec du danger. BTN danger Ensuite pour confirmer, on sera toujours en situation de danger, Par contre pour celui, on va mettre je pense que c'est default, le type de base. Donc là, voyez il a bien pris le rouge. Et le annuler, et par défaut c'est beaucoup plus joli que ce qu'on avait avant. Par contre, c'est un petit peu plus gros, donc suivant dans quels contextes on va s'en servir, ça risque de poser des problèmes, ça risque de pousser d'autres éléments, de sortir des cadres, donc ce qu'on va faire, on va en profiter pour dire ceci, bon je crois que c'est BTN SM pour avoir les tailles plus petites, supprimer, voilà, là ils sont plus petit, ça permet que ça fasse sensiblement la même taille. la hauteur n'est pas exactement la même mais déjà voyez on a un truc de fonctionnel. Voilà on a réussi à faire un composant un petit peu plus complet.

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 !