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 objets

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Créez très simplement de nouveaux objets pour votre application. Ember Data les créera pour vous dans votre service web.
06:29

Transcription

Nous avons vu comment récupérer des groupes ou des contacts depuis notre serveur en rest, en utilisant ember data. Maintenant nous allons comment créer des nouveaux objets. Nous allons réouvrir notre projet et ajouter déjà graphiquement un bouton permettant de créer un nouveau groupe. Donc on va aller dans groups hbs, Voilà, là où on a la liste des groupes, et juste après la liste, on va ajouter un bouton. voilà, et je vais ajouter une action sur ce bouton. Action que je vais appeler addGroup ajouter un groupe Je vais l'enlever du ul Voilà, maintenant j'ai ajouté mon petit bouton ajouter un groupe, Pour l'instant, si je clique et bien ça ne marchera pas, On le voit pas, mais il doit y avoir une erreur, si je met l'inspecteur, voilà, il y a bien une erreur puisqu'il me dit vous n'avez pas géré l'action qui a été lancée par le bouton. Je vais aller ici, Donc pour le gérer je vais devoir ajouter, puisqu'on n'est pas dans un composant, on est directement dans la page, soit en fait, on aurait pu transformer tout ça en composant, ça aurait été pas mal. Là, ce qu'on va faire, puisqu'on peut encore s'en servir, même s'il faudra petit à petit vous en éloignez, on va utiliser 1 contrôleur, le contrôleur de groups. On va aller comme d'habitude, générer ember g controler groups Donc il m'a généré automatiquement le fichier, groups dans app, slash controler, Il apparait bien ici. Et donc je vais ajouter maintenant, le code qui permettra de gérer ce qui se passe lorsqu'on appuie sur le bouton. addGroup Là pour l'instant je vais mettre un alerte pour vérifier que tout est bon. créer un nouveau groupe Voilà, on est bien arrivé au bon endroit, je vais faire en sorte maintenant de réellement créer un nouvel objet. Pour créer un objet avec ember data, c'est très simple, il vous suffit alors je vais préparer une variable pour recevoir mon nouvel objet, on va l'appeler new group, est égal on va demander au store de le créer pour nous this store point create record on va lui préciser de type d'objet à créer, de la même manière que quand on les recherche, entre guillemets. group et ensuite les données initiales à mettre dans cet objet. On va mettre pour l'instant un titre UM pour tous. nouveau groupe On pourrait éventuellement préciser l'image, si on le souhaite, Mais là j'en ai pas en particulier à mettre, donc pour l'instant, on ne mettra aucune image. ce sera peut-être le serveur, on peut supposer que le serveur, ajouter 1 image par défaut. on va fermer la parenthèse, point virgule. On va tester pour vérifier si ça marche. Arrivé ici, si je clique sur ajouter un groupe, on voit qu'il m'a bien ajouté le groupe. Par contre, ce qui est vraiment important d'avoir, si je vais en inspecteur, je me rends compte qu'il n'a pas fait de requêtes particulières, ça c'est celle qui lui a permis de charger la liste des groupes. Il n'y a pas de souci. Mais par contre, à aucun moment il n'a prévenu le serveur qu'il y avait un ajout qui avait été fait. En effet ce changement est uniquement en local, si je recharge la page, On voir qu'on a perdu les modifications, elles n'ont jamais été envoyées au serveur. Si je veux envoyer mes changements au serveur, je vais ajouter une ligne, en disant new group point save Cette fois-ci si je clique sur ajouter un groupe, automatiquement, il l'a créé et si je vais voir l'inspecteur, Network donc ça, c'était récupérer la liste, ensuite il a demandé au serveur les options qu'il avait pour savoir s'il avait droit de faire un post dessus, soit c'est automatique, c'est ember qui fait ça, et juste après, voilà le serveur lui a dit qu'il y avait get head put patch post delete de possible, donc puisqu'il a le droit de faire un POST, il l'a fait juste après un post, avec comme données ceci : group title Alors le souci, c'est que mon serveur n'étant pas compatible avec ce format, je pense qu'il a dû répondre quelque chose d'incorrect, voilà, effectivmement le serveur il a répondu groups. Et il a remis ce qu'il a envoyé ember alors qu'il aurait pas dû. Donc forcément ça va pas faire un super résultat au niveau du projet, mais c'est pas très très grave. On peut aller voir par exemple le serveur, alors voici le fichier Json du serveur. Voyez, il a stocké ça de cette façon-là, là dedans. Je vais l'enlever. Directement corriger au niveau du serveur. Ça montre bien qu'il vaut mieux avoir de vrais serveurs, alors pour des cours ou pour des tests, c'est très bien, un serveur des données aléatoires, Idéalement il faudrait que vous ayez un serveur compatible avec Json API. pour vraiment exploiter à 100 % ember data. Je ne sais pas si le serveur va garder mes chargements, je vais rafraichir pour vérifier. Donc il n'a pas gardé mes chargements, voyez. Je fais relancer le serveur, pour qu'il prenne en compte ce que jai fait. et recharger, voilà, et là, il a bien gardé les données, il a bien créé l'élément. Voilà pour la création, donc le principe vous créez un objet en local, vous pouvez le modifier, faire tout ce que vous voulez dessus. Tant que vous n'appelez pas save, il ne va pas envoyer l'objet sur le serveur. Et d'ailleurs vous avez la possibilité à tout moment, pour tous les objets avec lesquels vous travaillez sur ember, que ce soit un nouvel objet ou un objet existant que vous n'avez pas encore envoyé au serveur, vous avez une propriété qui vous dit si l'objet est ce qu'on appelle dirty donc s'il a des changements, donc s'il est sale, ça veut dire qu'il a pas encore été envoyé au serveur. et qu'en appelant, ça enverra ses changements au serveur.

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
Votre/vos formateur(s) :
Date de parution :31 mars 2016
Durée :2h57 (37 vidéos)

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 !