Tutoriel Backbone.js : supprimer des listes

• Partie 1 : environnement de développementPartie 1t
• Partie 2 : les API Google et RequireJSPartie 2
• Partie 3 : authentification avec OAuth2Partie 3
• Partie 4 : Backbone.syncPartie 4
• Partie 5 : affichage des listesPartie 5
• Partie 6 : créer des listesPartie 6
• Partie 7 : modifier des listesPartie 7
• Partie 8 : supprimer des listesPartie 8
• Partie 9 : les tâchesPartie 9
• Partie 10 : oh non, pas plus de tâchesPartie 10
• Partie 11 : Spies, Stubs et MocksPartie 11
• Partie 12 : tester avec MocksPartie 12
• Partie 13 : routagePartie 13
• Partie 14 : personnaliser l'interfacePartie 14
• Partie 15 : mettre à jour, purgerPartie 15
• Partie 16 : plugin jQuery et déplacement des tâchesPartie 16

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) :

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

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 » :

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 :

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.

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) :

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.

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.

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

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original Backbone.js Tutorial: Deleting Lists du site DailyJS.
Je remercie également _Max_ pour sa relecture attentive et assidue.