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.