Tutoriel Backbone.js : supprimer des listes

Cet article est la traduction de Backbone.js Tutorial: Deleting ListsBackbone.js Tutorial: Deleting Lists publié sur DailyJSDailyJS.
Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Préparation

Avant de commencer ce tutoriel, vous aurez besoin de ce qui suit :

  • alexyoung/dailyjs-backbone-tutorial en version 0953c5d ;
  • la clé de l'API de la partie 2 ;
  • l'ID client de la partie 2 ;
  • la mise à jour de app/js/config.js avec vos clés.

Pour consulter la source, exécutez les commandes suivantes (ou utilisez un outil approprié pour Git GUI) :

 
Sélectionnez
git clone git@github.com:alexyoung/dailyjs-backbone-tutorial.git
cd dailyjs-backbone-tutorial
git reset --hard 0953c5d

II. Suppression de listes

Nous sommes maintenant à la fin de la mise en œuvre complète du CRUD (Create, Read, Update, Delete) pour les listes. Pour supporter la suppression d'éléments, il suffit d'accrocher le lien que nous avons déjà ajouté et d'ajouter le code de la méthode delete à gapi.js. Vous pouvez essayer de le faire vous-même pour la pratique.

Ouvrez le fichier app/js/views/app.js et ajoutez une liaison d'événement pour le lien « Supprimer la liste » :

 
Sélectionnez
events: {
  'click #add-list-button': 'addList'
, 'click #edit-list-button': 'editList'
, 'click #delete-list-button': 'deleteList'
},

Ensuite, ajoutez une méthode nommée deleteList à la même classe :

 
Sélectionnez
deleteList: function() {
  if (confirm('Êtes-vous sûr de vouloir supprimer cette liste ?')) {
    bTask.views.activeListMenuItem.model.destroy();
  }
  return false;
}

Tout en appliquant ces deux modifications, la liste active sera supprimée de l'interface. Backbone sait comment faire pour supprimer la vue lorsque model.destroy est appelé dans deleteList.

III. Changements de Backbone.sync

Pour faire persister la suppression des listes, ouvrez le fichier app/js/gapi.js et ajoutez un case 'delete' après 'update' (ce devrait être autour de la ligne 100) :

 
Sélectionnez
case 'delete':
  requestContent['resource'] = model.toJSON();
  request = gapi.client.tasks[model.url].delete(requestContent);
  Backbone.gapiRequest(request, method, model, options);
break;

L'API de Google fournit la méthode delete. Pour le reste, c'est identique que pour la mise à jour des éléments.

IV. Prochainement

Cette partie a été courte, alors considérez ceci comme votre semaine de repos. Allez voir et jouez avec la source afin de voir ce que vous pouvez obtenir grâce à l'API Google Tasks et Backbone ! Il reste encore beaucoup de choses à couvrir.

Au cours des huit derniers tutoriels, vous avez appris comment :

  • écrire une version personnalisée de Backbone.sync ;
  • utiliser l'API Google Tasks avec JavaScript côté client ;
  • écrire des modèles, des vues et des collections de Backbone.

Cela pourrait être adapté pour travailler avec les autres API Google, ou peut-être même les autres API que je n'ai pas considérées. Une fois que vous avez une bonne compréhension de comment les modèles et la synchronisation de données de Backbone fonctionnent, alors beaucoup de choses deviennent possibles.

Les prochains tutoriels couvriront les éléments suivants :

  • tester les API de Google ;
  • ajouter, modifier et supprimer les tâches elles-mêmes ;
  • une interface utilisateur Bootstrap ;
  • personnalisation de Bootstrap.

V. Résumé

Le code source de ce tutoriel se trouve ici : alexyoung/dailyjs-backbone-tutorial en version 8d88095.

VI. Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young. L'article original peut être lu sur le site DailyJSDailyJS : Backbone.js Tutorial: Deleting ListsBackbone.js Tutorial: Deleting Lists.
Je remercie également _Max_ pour sa relecture attentive et assidue.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2012 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.