Découvrir Ember.js

Modifier et sauvegarder des objets

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à concevoir une interface capable de détecter les données qui ont été modifiées par l'utilisateur. Voyez comment confier à Ember Data l'enregistrement de ces modifications.
08:50

Transcription

Maintenant que nous savons créer nos objets, nous allons chercher à les modifier ou à les supprimer. Dans notre page de groupe, nous avons donc le titre, un champ permettant d'éditer le titre, mais il n'y a aucun moyen d'enregistrer, on ne peut pas envoyer ça sur le serveur pour l'instant. Si je recharge, je perds automatiquement toutes les modifications que j'ai faites. Et on a aussi la suppression, qui pour l'instant ne fait rien. C'est-à-dire qu'elle affiche que l'objet a été supprimé (tiens, d'ailleurs, maintenant qu'on a des vrais objets, il faudra vraiment utiliser le Get Title.) Hop ! Je vais annuler. Et donc, on va faire en sorte de pouvoir, déjà, améliorer le mode d'édition et pouvoir enregistrer nos modifications. Rendons-nous tout d'abord sur cette page. groupcard On est bien dans le composant qui affiche la carte du groupe. Donc on affiche le groupe ici, on a le titre ici, on a l'input qui est là. Alors on va le placer au-dessus. Alors on va aussi le styler un petit peu cet input, utiliser justement le style de Bootstrap, qui s'appelle form-control. J'en profite aussi pour vous préciser que pour n'importe quel composant, vous pouvez ajouter manuellement des styles depuis l'extérieur. C'est-à-dire ce que je suis en train de faire ici, vous pouvez le faire sans problème sur celui-ci, par exemple, sur le confirm-button : si je veux ajouter un style de plus, je peux le faire. Ça s'ajoutera en plus à ceux que vous auriez éventuellement déclaré dans le composant même. class = form-control On va voir ce que ça va donner. Voilà : la différence, c'est au lieu d'avoir, donc, un champ texte sans aucun style, on a celui de Bootstrap, qui donne une largeur et une taille beaucoup plus sympas, des bordures, aussi, un petit peu arrondies, etc. Ce que j'aimerais faire, ce serait de faire en sorte d'avoir soit le titre affiché, soit l'éditeur. C'est-à-dire avoir un bouton qui nous permette de passer en mode édition. On va donc ajouter ce bouton. On va le mettre ici. - Default - et on va l'appeler : « Editer ». Voilà, il est ici. Alors il pousse le bouton Supprimer. Pourquoi ? Parce que le bouton Supprimer, normalement ça devrait être en inline-block comme n’importe quel bouton, sauf que, rappelez-vous, ce n’est pas vraiment un bouton, il est inséré dans une div, celle de son composant, vous voyez, qui lui est en bloc. C’est le problème qu’on a. Ce qu’on va faire pour gérer ça, on va - même si, bon, le CSS, ce n’est pas le plus important mais ce serait bien que ça rende un petit peu mieux - on va ouvrir notre confirm-button, ajouter comme on l’avait déjà fait pour d’autres class names deux points On va ajouter une classe spéciale confirm-button pour qu’il y ait ce style-là et dans le app css, on va ajouter confirm-button. On va dire, donc, display : inline-block pour que ça garde les mêmes règles qu’un bouton standard. C’est-à-dire que la div qui encapsule le bouton ait les mêmes règles. Voilà, donc cette fois-ci il est aligné. Alors pour plus que ce texte soit maintenant à la suite, on va faire en sorte que nos deux éléments soient ensemble dans un div, ça devrait suffire. Voilà. Ce qui nous reste à faire, donc, c’est que lorsque l’on clique sur ce bouton Editer, ça bascule soit en mode édition, et quand on re clique, on ressort du mode édition. Donc afficher soit l’un soit l’autre. On va séparer la fenêtre en deux, ouvrir ici group-card.js. On va rajouter une propriété, isEditing, qui par défaut sera False. Je vais aussi ajouter une méthode, editButtonPressed qui sera une action qu’on pourra déclencher depuis le bouton, qui va dire : « si si on est en train d’éditer, alors on va dire this.set et on va arrêter l’édition, sinon on l'active. Ce qui me reste à faire maintenant, c’est de dire que lorsqu’on clique sur le bouton Editer, ça déclenche l’action appelée editButtonPressed. Donc on a notre statut qui va évoluer, on n’a pas encore fait en sorte de s’en servir en template, c’est-à-dire ici. Il va tout simplement nous falloir utiliser un if_, un if else, si je suis en train d'éditer alors j'affiche ça : input. Sinon, j'affiche le titre. Quand je vais cliquer sur Editer... Voilà. Il a changé, il a mis le champ texte. Et quand je réplique, je sors du mode édition. Maintenant, on va revenir sur ce qu'on cherchait à faire au départ, c'est-à-dire sauvegarder des objets sur notre serveur. Donc, on va utiliser Ember Data pour ça. Sur Ember Data, vous avez une logique à comprendre. C'est-à-dire que lorsque vous faites vos changements sur vos objets, si je modifie ici le texte de " Famille ", ça le modifie sur les objets en local. Il n'envoie rien au serveur tant que vous ne lui dites pas. C'est-à-dire que les objets sont bien modifiés, mais si je vais dans Network, - alors, je vais effacer toutes les requêtes - et je vais taper. Vous allez voir, on voit bien que les objets sont modifiés puisque partout où ils étaient utilisés, on voit que les changements sont pris en compte. Par contre, si je vais voir la console, il n'y a aucune requête réseau qui est partie. Donc le serveur n'est pas au courant de ces changements et si je recharge ma page, bien entendu, il va revenir aux valeurs du serveur, puisque chaque fois qu'on recharge il demande les données au serveur. Pour savoir si un objet a des changements locaux qui n'ont pas été envoyés, vous avez une propriété : hasDirtyAttributes. Donc, ce qu'on va pouvoir faire par exemple, ici, ça serait (alors, pour pas faire les allers-retours entre l'image de haut en bas, on va déplacer ça juste avant l'image, ,voilà, pour que les boutons soient placés juste en dessous du texte) Et ici, on va ajouter encore une fois un if dans endelbar et je vais dire : si le groupe, l'objet Ember que j'ai hasDirtyAttributes, alors, on va ajouter un bouton Sauvegarder. Alors je vais reprendre celui-ci. Je vais mettre un Button Success, pour qu'il soit vert. On va dire Save Button Pressed et on va l'appeler : Enregistrer. Quand je clique sur Editer, je passe en mode édition et dès que je fais des modifications, on voit qu'il se rend compte qu'il y a des changements entre la valeur qu'il a téléchargée sur le serveur et celle qu'on a ici, donc il me propose d'enregistrer. Si je reviens, hop! il se rend compte que même si lui, il n'a rien fait, on est revenu à la valeur de départ, donc il enlève ce bouton. Donc on peut en permanence savoir s'il y a des changements à faire quelque part. On va donc maintenant gérer cette sauvegarde. Save Button Pressed Et là, tout simplement, ce que je vais faire : this.get group .save Voilà tout ce qu'il y a à faire pour sauvegarder au niveau du serveur. Editer Familles Enregistrer Si je vais voir les requêtes qui ont été effectuées, on voit qu'il a fait un PUT sur local groups/1, donc le titre ancien de mon groupe, il a envoyé les données suivantes ; alors, il a envoyé, donc, au format que Ember voudrait, et forcément, mon serveur n'étant pas compatible avec ce format-là, il a enregistré un groupe de façon un petit peu bizarre, ce n'est pas ce qu'il nous faudrait, mais on voit bien que la requête est partie, c'est juste le serveur qui n'est pas 100 % compatible. Voilà pour sauvegarder.

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 !