Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Ember.js

Créer des actions internes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Faites en sorte que votre composant évolue en fonction de ses interactions avec l'utilisateur. Maxime Britto vous montre comment procéder.
06:24

Transcription

Nous avons vu que notre composant était capable d'aller lire les propriétés directement depuis le code Javascript qui lui appartient, donc le template est capable de lire dans le code Javascript, maintenant ce que j'aimerais vous montrer, ce serait de faire en sorte que si l'utilisateur fait quelque chose dans le template, par exemple clique sur un bouton, ça déclenche l'exécution de code dans la partie Javascript, alors ce qu'on va essayer de faire, ce serait un bouton supprimer, par exemple qui propose de supprimer complètement le groupe si l'utilisateur clique dessus. Donc je vais d'abord ajouter mon bouton, je vais l'appeler « supprimer », vérifiez qu'il s'affiche bien, voilà, donc on a bien le bouton supprimer qui est ici. Pour que ce bouton exécute du code, pour l'instant, si j'appuie dessus il ne se passe rien. Si je veux que ce bouton exécute du code, il va falloir que j'utilise ce qu'on appelle des actions. Donc pour utiliser des actions, il vous suffit de les déclarer dans la partie Javascript, action, deux points, vous ouvrez un hash, et ici, vous mettez le nom de vos actions, donc par exemple, delete button pressed Donc là, on ajoute une fonction qui aura le nom de l'action, que l'on souhaite effectuer, et ici, je vais lui dire, action dans un under bar et entre guillemets, il faut que je mette le même nom que celui que j'ai mis à côté. Alors pour ne pas faire d'erreur, je vais le copier, et le coller. Juste pour vous montrer ce qui se passe, alert, je vais pas vraiment faire une suppression, et je vais afficher une alerte qui confirme si voulez-vous vraiment supprimer ce groupe ? Qu'est-ce qui va se passer maintenant si je clique sur ce bouton ? Voyez, il a bien affiché l'alerte, donc un confirm qui me demande si oui je veux le supprimer, ou annuler, je veux rien faire. Pour l'instant j'ai pas fait le code de suppression, donc ça fera la même chose quoiqu'il arrive, ça va juste le masquer. Et vous voyez qu'on a pu lancer, une action depuis le template et jusqu'au code Javascript. Alors ce que je vous propose qu'on fasse, plutôt que d'afficher un confirm, ça marche mais c'est assez standard, on va essayer de trouver un truc un petit peu plus sympa, on va commencer à utiliser des propriétés qu'on a ici. On va ajouter une nouvelle propriété, qu'on va appeler Play should confirm deux points false et ici on va dire point set should confirm et le passer à true Donc à quoi va nous servir cette propriété ? Elle va nous servir tout simplement à changer l'apparence graphique, si on est en mode confirmation ou non. Donc par défaut, je ne serais pas en mode confirmation, mais dès qu'on va cliquer sur le bouton, la première fois qu'on va appuyer dessus, on va demander à la personne si elle souhaite confirmer, donc on va changer de mode et afficher une apparence différente ici. Avant qu'on aille plus loin, j'aimerais quand même vous expliquer pourquoi j'ai utilisé cette syntaxe pour modifier le set. C'est à dire, pourquoi je n'ai pas fait irectement this.shouldConfirm=true ? Il faut toujours utiliser les set et les get dans les objets ember, puisque ça permet de mettre à jour automatiquement tous les bindings, si vous changez directement les propriétés sans passer par un set ou par un get vous aurez souvent des problèmes de bindings, parce que il sera pas au courant que vous avez modifié cette valeur et il va pas forcément aller modifier tous les endroits où on se sert justement de should confirm. Pour l'instant, on s'en sert nulle part, mais on va bientôt s'en servir. Donc il est vraiment important que ce soit un réflex de toujours modifier ou accéder à vos variables en utilisant get et set systématiquement. On va voir justement quelque chose qu'on a pas encore vu sur nos templates. À dans les composants, mais aussi dans les templates standards, c'est les conditions avec les if qu'on connaît dans d'autres languages de programmation. Pour l'utiliser, comand shift P pour afficher les commandes de sublime On tape if, et voyez qu'il me propose soit le if standard, soit le if else. quand je pars des handlebars, je vais prendre le if else. Le if je dois lui passer une variable qui retourne true ou false. Donc tout simplement, je vais lui passer mon should confirm. Si je suis en mode confirmation, on va faire quelque chose, sinon on va mettre le bouton delete. Notre bouton supprimer ne sera présent que lorsqu'on est pas en mode confirmation. si on est en mode confirmation, on va avoir un bouton légèrement différent, on va faire, peut-être confirm button pressed confirmer confirm button pressed, donc là je vais ajouter une action différente, alert group supprimer Alors on va pas forcément supprimer, on va juste une alerte pour l'afficher, et voir si ce qu'on a fait à marché. On revient ici, et j'appuie sur supprimer, et vous voyez, il me propose de confirmer. Et si je reclique là-dessus, groupe supprimé Alors j'ai pas fait le moyen d'annuler, alors on va le faire, pour être vraiment exhaustif. On va faire ce sera une copie finalement de celui-ci, quasiment. cancel button pressed should confirm false Et donc si je suis dans ce mode-là, annuler cancel button pressed Donc supprimer, là il me propose soit j'annule et je reviens en mode supprimer soit je confirme et là, ça le supprime. On voit à quel point ça peut devenir intéressant, grâce aux actions de modifier des propriétés qui modifient à leur tour l'apparence qu'il y a ici. Alors là on reste interne au composant, on a vu qu'on pouvait déclencher des actions, exécuter du code. et baser vraiment notre template sur ce qui se passe dans l'objet Javascript. Pour l'instant on n'a pas encore les liens avec l'extérieur, à part les paramètres rentrants ce qu'on va voir dans le prochain cours c'est comment faire en sorte de prévenir l'extérieur de ce qui vient de se passer à l'intérieur, notamment pour la suppression, on ne va pas supprimer nous-même un objet qu'on nous a fait passer, On va prévenir la personne qui nous l'a fait passer, qu'il doit être supprimé.

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 !