I. Préparation

Avant de commencer ce tutoriel, vous aurez besoin de ce qui suit :

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 fcd653ec6

II. Structure filaire

L'application que nous construisons a plusieurs éléments de l'interface principale :

  • une disposition en deux colonnes pour l'affichage des listes de tâches et des tâches ;
  • des formulaires permettant d'ajouter et de modifier chaque type d'élément ;
  • des boutons pour appeler les formulaires, pour supprimer des éléments et effacer des éléments complets ;
  • un contrôle de l'état de la tâche (case à cocher).

L'image ci-dessous montre la structure de base.

Image non disponible

Dans ce tutoriel, nous allons commencer l'implémentation de l'interface à l'aide d'une liste à puces pour représenter les listes de tâches.

III. Éléments de la liste

Tout en étant relativement simple, l'implémentation d'une liste navigable de listes de tâches implique plusieurs éléments Backbone.js :

  • les templates HTML ;
  • les vues Backbone : ListMenuView et ListMenuItemView ;
  • les collections Backbone : TaskLists.

La ListMenuView contient le menu des listes de tâches et le ListMenuItemView est l'élément de navigation pour chaque liste de tâches. Cela peut être modélisé avec un ul et un ensemble d'éléments li.

Créez un nouveau répertoire nommé app/js/views/lists où vous stockerez les classes Backbone.View liées aux listes de tâches et un autre appelé app/js/templates/lists pour les modèles correspondants.

IV. La vue ListMenuView

Cette vue se trouve dans app/js/views/lists/menu.js :

 
Sélectionnez
define(['views/lists/menuitem'], function(ListMenuItemView) {
  var ListMenuView = Backbone.View.extend({
    el: '.left-nav',
    tagName: 'ul',
    className: 'nav nav-list lists-nav',

    events : {
    },

    initialize: function() {
      this.collection.on('add', this.render, this);
    },

    render: function() {
      // TODO
    }
  };

  return ListMenuView ;
};

Cela charge views/lists/menuitem que nous allons créer dans un instant. Ensuite, ça se lie à l'élément .left-nav qui a été créé par AppView ainsi qu'au template correspondant. Le menu lui-même est une liste non ordonnée et il utilise des noms de classe qui sont plus pertinents lorsque les styles sont ajoutés.

Notez que la vue d'affichage s'attend à une collection. Les collections peuvent être passées à une vue lors de l'instanciation. Par exemple, new ListMenuView({ collection : lists }) passera la collection lists à une instance de cette vue.

La méthode render devrait ressembler à ceci :

 
Sélectionnez
render: function() {
  var $el = $(this.el)
    , self = this;

  this.collection.each(function(list) {
    var item, sidebarItem;
    item = new ListMenuItemView({ model : list };
    $el.append(item.render().el) ;
  };

  return this ;
}

L'élément de la vue est utilisé comme conteneur pour chaque ListMenuItemView qui est passé à un template en effectuant une itération sur la collection.

V. La vue ListMenuItemView

Le fichier app/js/views/lists/menuitem.js est similaire à la vue précédente mais il utilise un template et la fonctionnalité de liaison des événements déclaratifs de Backbone.

 
Sélectionnez
define(['text!templates/lists/menuitem.html'], function(template) {
  var ListMenuItemView = Backbone.View.extend({
    tagName: 'li',
    className : 'list-menu-item',

    template : _.template(template),

    events : {
      'click' : 'open'
    },

    initialize: function() {
      this.model.on('change', this.render, this);
      this.model.on('destroy', this.remove, this;
    },

    render: function() {
      var $el = $(this.el);
      $el.data('listId', this.model.get('id')) ;
      $el.html(this.template(this.model.toJSON())) ;
      return this ;
    },

    open : function() {
      var self = this;
      return false ;
    }
  };

  return ListMenuItemView ;
};

Le template est app/js/templates/lists/menuitem.html :

 
Sélectionnez
<a href="#" class="list-title" data-list-id=""></a>

Notez que les accolades sont utilisées pour insérer des valeurs. Ceci est prévu par le système de template de Underscore.

La méthode open de la vue est liée aux événements click. J'ai également lié le modèle des événements change et destroy à la vue. Ce sera utile plus tard.

Les valeurs du template sont insérées à l'aide de la méthode template dans render :

 
Sélectionnez
$el.html(this.template(this.model.toJSON())) ;

Le JSON brut est passé à template donc title et id devront avoir les bonnes valeurs.

VI. Invoquer ListMenuView

Ouvrez le fichier app/js/app.js et ajoutez ListMenuView à la liste de define requis :

 
Sélectionnez
define([
  'gapi'
, 'views/app'
, 'views/auth'
, 'views/lists/menu'
, 'collections/tasklists'
],

function(ApiManager, AppView, AuthView, ListMenuView, TaskLists) {

La dernière fois, j'ai ajouté console.log pour afficher le nom de chaque liste. Supprimez ce code et modifiez-le pour afficher la ListMenuView :

 
Sélectionnez
connectGapi: function() {
  var self = this;
  this.apiManager = new ApiManager(this);
  this.apiManager.on('ready', function() {
    self.collections.lists.fetch({ data : { userId: '@me' }, success: function(res) {
      self.views.listMenu.render() ;
    }});
  };
}

Allez au constructeur de App pour lui faire instancier listMenu en passant la collection adéquate :

 
Sélectionnez
var App = function() {
  this.views.app = new AppView();
  this.views.app.render() ;
  this.views.auth = new AuthView(this);
  this.views.auth.render() ;
  this.collections.lists = new TaskLists() ;
  this.views.listMenu = new ListMenuView({ collection : this.collections.lists };

  this.connectGapi() ;
} ;

VII. Exécution

Maintenant, si vous exécutez le serveur Node et visitez la page http://localhost:8080/, vous devriez voir vos listes de tâches affichées dans une liste non ordonnée simple.

VIII. Résumé

L'application communique maintenant avec Google qui permet aux utilisateurs de se connecter et dresse les listes de tâches de l'utilisateur. Cela ne semble toujours pas excitant parce que nous ne l'avons pas encore appliqué à tous les styles mais vous devriez être en mesure d'adapter le code que vous avez vu jusqu'à présent pour travailler avec d'autres API Google et des services similaires.

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

IX. 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: List ViewsBackbone.js Tutorial: List Views.
Je remercie également ClaudeLELOUP pour sa relecture attentive et assidue.