Tutoriel Backbone.js : affichage des listes

Alex Young

Traducteur

vermine

Cet article est la traduction de Backbone.js Tutorial : List Views publié sur DailyJS.
Commentez

- Titre : Tutoriel Backbone.js : affichage des listes

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 17 janvier 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 ® 2012 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. Structure filaire

- III. Éléments de la liste

- IV. La vue ListMenuView

- V. La vue ListMenuItemView

- VI. Invoquer ListMenuView

- VII. Exécution

- VIII. Résumé

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

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.

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 :

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.

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.

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.

VI - Invoquer ListMenuView

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

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 concernant l'article original Backbone.js Tutorial: List Views du site DailyJS.
Je remercie également ClaudeLELOUP pour sa relecture attentive et assidue.