Tutoriel Backbone.js : mettre à jour, purger

Alex Young

Traducteur

vermine

Cet article est la traduction de Backbone.js Tutorial: Updates for 1.0, Clear Complete publié sur DailyJS.

Commentez

- Titre : Tutoriel Backbone.js : mettre à jour, purger

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 14 mai 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 ® 2013 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. Mise à jour vers Backbone 1.0

- III. Purger

- IV. Résumé

- V. 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 711c9f6 ;

- 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 711c9f6

II - Mise à jour vers Backbone 1.0

J'ai mis à jour bTask pour travailler avec Backbone 1.0 qui exigeait deux petits changements. Le premier était un changement sur le comportement des callback de Backbone.sync. L'appel interne pour le callback success a besoin maintenant d'un seul argument, c'est-à-dire les données de réponse. Je pense que je l'ai mentionné sur DailyJS, mais vous ne devriez pas devoir vous inquiéter à ce sujet dans vos propres projets Backbone à moins que vous ayez écrit une implémentation personnalisée de Backbone.sync.

Le deuxième changement concerne les événements add des collections qui se déclenchaient lorsque les vues appelaient fetch. J'ai corrigé cela en passant reset: true au fetch. Les détails ont été inclus dans la documentation Backbone sous la rubrique « Upgrading to 1.0 » :

Si vous voulez mettre à jour intelligemment le contenu d'une collection, en ajoutant de nouveaux modèles, en enlevant ceux manquants, et en fusionnant ceux déjà présents, vous devez maintenant appeler set (précédemment nommé « update »), une opération similaire pour appeler set sur un modèle. C'est maintenant l'action par défaut lorsque vous appelez fetch sur une collection. Pour obtenir l'ancien comportement, passez {reset: true}.

III - Purger

Lorsqu'une tâche dans Google Tasks est marquée comme terminée, elle apparaît barrée et reste dans la liste jusqu'à ce qu'elle soit désactivée ou supprimée. La plupart des clients de Google Tasks ont un bouton qui dit « Purger les tâches terminées », alors j'en ai ajouté un à bTask.

J'ai ajouté une méthode appelée clear à la collection de Tasks qui appelle la méthode .clear de l'API Google Tasks (plutôt que de le faire par l'intermédiaire de Backbone.sync) :

define(['models/task'], function(Task) {
var Tasks = Backbone.Collection.extend({
model: Task,
url: 'tasks',

clear: function(tasklist, options) {
var success = options.success || function() {}
, request
, self = this
;

options.success = function() {
self.remove(self.filter(function(task) {
return task.get('status') === 'completed';
}));

success();
};

request = gapi.client.tasks.tasks.clear({ tasklist: tasklist });
Backbone.gapiRequest(request, 'update', this, options);
}
});

return Tasks;
});

J'ai également ajouté un bouton (à l'aide des icônes intégrées de Bootstrap) au fichier app/js/templates/app.html et ai ajouté un événement à AppView (dans le fichier app/js/views/app.js) :

var AppView = Backbone.View.extend({
// ...
events: {
'click .clear-complete': 'clearComplete'
},

// ...
clearComplete: function() {
var list = bTask.views.activeListMenuItem.model;
bTask.collections.tasks.clear(list.get('id'), { success: function() {
// Afficher un retour utilisateur
}});
return false;
}
});

J'ai dû changer le fichier app/js/views/lists/menuitem.js pour définir la collection actuelle dans la méthode open pour que cela fonctionne.

IV - Résumé

Parce que j'ai passé en revue l'évolution de Backbone qui a progressé jusqu'à la version 1.0 pour DailyJS, la mise à jour de ce projet n'a pas demandé trop d'effort. En général, la version 1.0 est rétrocompatible, alors vous devriez certainement envisager la mise à niveau de vos propres projets. En outre, maintenant que bTask a une méthode « Purger », j'ai le sentiment d'avoir passé en revue assez de caractéristiques standards de Google Tasks pour pouvoir les utiliser effectivement régulièrement.

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

V - Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original Backbone.js Tutorial: Updates for 1.0, Clear Complete du site DailyJS.

Je remercie également mumen pour sa relecture attentive et assidue.