Tutoriel Backbone.js : mettre à jour, purger

• 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 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

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}.

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.

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.

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.