Dans la continuité du TP1, nous allons utiliser le framework Backbone.js pour la gestion des “vues”. Les vues de Backbone.js ne sont pas de vraies views au sens du design pattern MVC (une “vraie” view serait plutôt le DOM HTML représentant les données d’un Model à l’utilisateur). Une “view” de Backbone.js va s’occuper de la génération de la vue, de sa synchronisation avec le modèle associé et de la gestion des événements. Ces views remplissent donc un rôle assez proche de celui des Controllers.
La documentation des views indique que les vues sont plus des conventions que du code. Effectivement, le système des vues de Backbone.js est souple et laisse ouvert la manière dont une view génère le HTML ainsi que la gestion de sa synchronisation avec le modèle associé. La gestion des events (voir TP1) combinée aux views et models va permettre d’avoir une architecture logicielle bien structurée et respectant les bonnes pratiques.
Le framework nous indique que pour créer un constructeur pour nos vues il faut utiliser la méthode extend de manière identique à la création de constructeur pour les modèles (voir TP1). Lors de la création d’une view, la documentation montre qu’il est possible de passer en paramètre le model qui est associé à la vue.
1.a) Dans le même projet que le TP1, créez une View nommée ViewItem. Faites que les vues écoutent les changements des attributs du modèle associé, et effectuent un rendu (méthode render) de la vue lorsque cela se produit. Votre méthode render ne devra faire qu’un console.log du model associé (pour le moment). Créez ensuite une instance de ModelItem nommé item1 et deux instances de ViewItem nommée view1Item1 et view2Item1 en leur fournissant le model item1 (deux vues pour représenter le même modèle). Puis, effectuez un set sur item1 pour lui ajouter un attribut title et observez combien de fois votre méthode render est exécutée (deux fois si tout est juste).
1.b) Les views de backbone sont en tout temps rattachées à un élément DOM. Cet élément est accessible via l’attribut el de la vue et son équivalent jQuery $el. Il est possible de spécifier l’attribut el d’une vue comme étant un élément DOM existant lors de la création de la vue, mais cela ne sera pas le cas de cet exercice. Si on ne le spécifie pas à la création, l’attribut el est un simple <div> sans attribut.
Reprenez votre code de l’exercice 1.a) et modifiez la fonction render afin qu’elle insert l’attribut title du modèle associé comme texte du noeud DOM el. Attendez que le DOM de votre page HTML soit prêt et ajoutez au <body> les éléments DOM view1Item1.el et view2Item1.el des vues. Modifiez l’attribut title de item1, et changez le title de item1 à nouveau deux secondes plus tard (grâce à la fonction setTimout par exemple). Observez que les deux vues se mettent à jour automatiquement lors des changements de l’attribut title.
La mise à jour du DOM est grandement facilitée grâce aux vues, mais il reste le travail fastidieux de l’insertion des données du Model dans l’élément DOM concerné (le code de votre méthode render). Pour faciliter ce travail, un système de template peut être utilisé. Backbone.js ne s’occupe pas du templating, il est donc possible de choisir n’importe quel moteur de template JavaScript. Comme Underscore.js est un pré requis de Backbone.js, il est déjà possible d’utiliser le moteur de template inclut dans ce framework, mais rien ne nous empêche d’en utiliser un autre. Pour avoir un peu plus de souplesse, nous allons prendre un moteur de template d'un plus "haut niveau" nommé Handlebars. Commencez donc par le téléchargez et ajoutez le à votre projet avant de faire les exercices suivants.
2.a) Reprenez le code de l’exercice 1.b et ajoutez un attribut template à ViewItem représentant la template Handelbars suivante:
Handlebars.compile("<article><h1>{{title}}</h1><p>{{description}}</p></article>");
Modifiez la fonction render afin d’utiliser cette template en y injectant les attributs du Model associé à la vue. enfin, testez le tout avec un code identique à l’exercice 1.b en rajoutant simplement un attribut description lors de la création de votre ModelItem item1.
2.b) Dans l’exercice précédent, le code HTML de la template est directement dans la vue. Améliorez ceci en mettant la template dans un fichier .html séparé (dans un dossier template par exemple).
Réalisez le model, la vue, la template ainsi que la CSS nécessaires pour l'affichage d'un menu contenant les entrées suivantes:
Faites que lorsqu'une nouvelle entrée au menu est ajouté au Model, le menu de la page se mets automatiquement à jour. Imaginez par exemple une entrée "Administration" qui ne serait accessible que lorsque l'on est loggé sur la page en tant qu'administrateur.
Vous verrez sans doute qu'il nous manque une pièce pour faciliter le développement du menu. En effet, il serait plus simple d'utiliser une colletion plutôt qu'un unique module pour représenter toutes les entrées du menu. Nous verrons ceçi au TP suivant.