Tutoriel Backbone.js : supprimer des listes

Alex Young

Traducteur

vermine

Cet article est la traduction de Backbone.js Tutorial: Deleting Lists publié sur DailyJS.
Commentez

- Titre : Tutoriel Backbone.js : supprimer des listes

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 7 février 2013

- Licence : 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.

Sommaire

- I. Préparation

- II. Suppression de listes

- III. Changements de Backbone.sync

- IV. Prochainement

- V. Résumé

- VI. Remerciements

I - Préparation

- Partie 1 : environnement de développement

- Partie 2 : les API Google et RequireJS

- Partie 3 : authentification avec OAuth2

- Partie 4 : Backbone.sync

- Partie 5 : affichage des listes

- Partie 6 : créer des listes

- Partie 7 : modifier des listes

- Partie 8 : supprimer des listes

- Partie 9 : les tâches

- Partie 10 : oh non, pas plus de tâches

- Partie 11 : Spies, Stubs et Mocks

- Partie 12 : tester avec Mocks

- Partie 13 : routage

- Partie 14 : personnaliser l'interface

- Partie 15 : mettre à jour, purger

- Partie 16 : plugin jQuery et déplacement des tâches

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

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

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.

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

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 concernant l'article original Backbone.js Tutorial: Deleting Lists du site DailyJS.
Je remercie également _Max_ pour sa relecture attentive et assidue.