Découvrir Ember.js

Définir les actions externes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez faire en sorte que votre composant prévienne le template ou les autres composants dès qu'il se passe un évènement important.
06:46

Transcription

Maintenant que notre composant est autonome et qu'il fonctionne bien il est venu le temps de le relier au monde extérieur. c'est à dire qu'une fois qu'il aura confirmé que la personne souhaite supprimer le groupe, il va prévenir la root dans laquelle il a été appelé qu'il faut faire quelque chose. Dans ce cas-là, ce sera supprimer le groupe. Pour faire ça, il va falloir prévoir quelque chose, une action qui sera passée par la root. Donc on va l'appeler onDelete, on va metter undefined par défaut, et ici, au lieu d'afficher une alerte indiquant que ça a été supprimé alors que finalement on n'a rien fait, on va exécuter l'action en question. Donc on va d'abord qu'on nous a bien passé une action, on aurait pu faire var je mets une constante puisqu'on va pas le modifier, delete action est égal à et là je vais essayer de récupérer l'action qu'on m'a fait passé en paramètre onDelete Si on m'a bien fait passé une action, donc mon objet sera valide, et du coup, je vais appeler exécuter cette action, en lui passant un paramètre le groupe que l'on m'a communiqué. Voici le principe, on prévoit un paramètre, ce paramètre va servir de lien entre l'extérieur et l'intérieur, ce sera une action, ce n'est pas une variable comme d'habitude, ça va vraiment être une action, et une fois qu'on a reçu cette action, on peut l'exécuter depuis l'intérieur du composant, pour faire passer l'action, on va aller à l'endroit où on a appelé notre composant, et on va dire, onDelete égal action et là, c'est l'action que l'on voudra réaliser, si le groupe Card demande une suppression du groupe. on va l'appeler, delete group Alors ce deleteGRoup à quoi il correspond? Bien pour l'instant il correspond à rien, on ne l'a pas créé. Ça veut dire que quelque part, dans notre root, ou à l'endroit où on est, il va falloir qu'on ait une action qui gère cette suppression. C'est là, je vous avais parlé tout à l'heure dans les précédents cours que les contrôleurs allaient bientôt disparaitre mais qu'ils n'ont pas encore disparu. Mais là c'est exactement ce genre de cas-là. Le seul moyen d'avoir une action ici, ça va être de le mettre dans le contrôleur de cette root. Pour l'instant, on a jamais fourni de contrôleur donc il va falloir en fournir un. Pour en fournir, c'est pas compliqué, on va faire exactement pareil que quand on a généré la root. Alors quand on avait généré la root, ça ressemblait à ça, groups/ group, voilà je vais remplacer root par contrôleur. Donc ember generate contrôleur groups, slash, group Alors il y a encore une fois le test, mais il y a surtout ce qui m'intéresse le app/controlers/groups/goup.js je vais aller dans ce fichier controler groups group Donc ce contrôleur-là, c'est celui qui va servir d'intermédiaire entre le template la root au niveau des intéractions. Et là, c'est le même principe que ce qu'on avait tout à l'heure, dans le composant, c'est à dire on va pouvoir ajouter des fonctions qui serviront pour les actions, il suffit de les mettre dans un hash sur la propriété action. Donc l'action elle s'appelait deleteGroup, je vais ici mettre deleteGroup, pour l'instant, on va juste faire une vrai alerte, ah tiens il recevait en paramètre le groupe, si je me rappelle bien, puisqu'on le passait en paramètre au moment d'appeler l'action, alert le groupe Encore une fois, il n'est pas vraiment supprimé, on le verra dans les cours suivant comment le faire. Voyons voir si tout fonctionne. supprimer confirmer Et ça n'a pas marché, on a dû oublier quelque chose. group.get is not a function ah oui, c'est pas des vrais objets, c'est vrai, pour l'instant c'est des valeurs de test. Alors tiens, ce qu'on peut voir ensemble, ça va être intéressant de vous montrer comment utiliser le débugueur dans ce contexte-là. J'aimerais voir exactement ce qu'il y a dans le groupe. Donc je vais ouvrir mon inspecteur, cliquer sur source, avec command P, je peux parcourir tous les fichiers. Là , c'est le fichier group.js qui est dans contrôleur, controller, oui c'est celui-ci, voyez il y a l'adresse en dessous. controllers/groups/group.js Effectivement il y a bien eu une erreur, et je vais mettre un point d'arrêt pour essayer de voir ce qui se passe. Voilà, confirmer J'ai réussi, là j'ai un point d'arrêt et je vais pouvoir me servir du débugueur pour voir un petit peu comment tout ceci marche, Donc il me dit que mon objet est ici, pourtant le get est bien présent, j'ai bien reçu un objet qui parait correct group, object, get si je fais group.title ça, ça marche. OK. On va le transformer par ça. Ce ne sont pas de véritables objets qu'on utilise pour le moment, on le verra justement dans le cours suivant, donc pour simplifier les choses, j'ai vraiment essayer de faire le truc le plus simple possible, c'est une requête Ajax qu'on fait, c'est pas vraiment ce qu'il faudrait faire et c'est pour ça qu'on n'a pas des objets réels. Là ça devrait marcher en passant par group.title Supprimer, confirmer... Voilà ! Le groupe famille a bien été supprimé. J'ai oublié de mettre un espace ici. On va essayer avec un autre ami. supprimer, confirmer Le groupe ami a été supprimé. Voilà donc on a vu comment faire en sorte depuis notre composant, d'envoyer un événement en local, qui déclenche lui-même un événement à distance, relié au contrôleur. Ce qu'il aurait vraiment fallu faire en temps normal, c'est justement, dans ce contrôleur, au lieu d'afficher une alerte, faire en sorte que ça exéute une requête sur notre serveur web, qui supprime les choses, notamment avec Ajax. Je voudrais pas forcément le faire, parce qu'on ne va pas insister trop sur Ajex, parce que dans les cours suivants, on va vraiment passer sur les vrais objets, ce qu'on appelle ember data qui permettent de télécharger depuis un service web, de gérer les suppressions les créations, etc sans faire des requêtes explicites, vous allez voir c'est beaucoup mieux, et c'est aussi pour ça qu'on a eu ce problème-là, c'est parce que ember n'est pas trop fait pour fonctionner avec des objets récupérés par Ajax, il est plutôt fait pour fonctionner avec ember data.

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 !