Tutoriel Backbone.js : affichage des listes

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

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.

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.

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.

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

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 :

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.

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.

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 :

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

$el.html(this.template(this.model.toJSON())) ;

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

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

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 :

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 :

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() ;
} ;

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.

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.

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original Backbone.js Tutorial: List Views du site DailyJS.
Je remercie également ClaudeLELOUP pour sa relecture attentive et assidue.