I. Préparation

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

 
Sélectionnez
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 BackboneBackboneJS 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) :

 
Sélectionnez
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) :

 
Sélectionnez
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.

N'oubliez pas que vous pouvez l'essayer par vous-même à l'adresse todo.dailyjs.com.

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. L'article original peut être lu sur le site DailyJSDailyJS : Backbone.js Tutorial: Updates for 1.0, Clear CompleteBackbone.js Tutorial: Updates for 1.0, Clear Complete.

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