L'objectif de cet article est de proposer plusieurs modélisation UML d'un projet de WebApplication avec la librairie Javascript BackboneJs.
Router > View > Model
Tout d'abord une modélisation très simple, qui comprend un router, une view et un model.
Modélisation UML Architecture simple Backbone
Cette modélisation est un bonne solution si on est dans un contexte relativement simple. C'est à dire que l'on a qu'un seul Model, que l'on affichera grâce à le View.
Le router permet d'instancier la view à laquelle il passera le model à afficher.
- Router = Backbone.Router.extend({
- routes: {
- "Page1": "maPage1", // http://monsite/#Page1
- "*actions" : "defaultRoute" //http://monsite/
- },
- maPage1 : function(){
- var view = new MaView({model : monModel, viewContainer : monContainer})
- }
- });
Router > Collection Model > View
Maintenant passons à une modélisation un peu plus complexe.
Modélisation UML avec une collection de model
Cette fois on souhaite afficher une liste de model. Dans cette architecture, la View permet l'affichage d'une collection de Model.
C'est à dire que dans la fonction Render(), nous allons faire un foreach() pour chaque élément de la liste, et générer directement le code HTML que l'on ajoutera à notre conteneur HTML de la liste.
- render : function (){
- this.collection.each(function (item){
- myContainterListe.append($(template(item.toJSON())));
- }
- }
Ce principe n'est pas optimal notamment si l'on souhaite gérer des évènements sur les items de la liste générée par le View.
Router > Collection > View > Model > View
L'architecture présentée ci-dessous à une granularité plus fine que celle ci-dessus.
Modélisation UML avec une view pour la collection et une view par item
Cette fois la fonction render() de la View de la collection, va faire appel ,pour chaque item, à la fonction Render() de la view des items.
- ListView = Backbone.View.extend({
- renderItem: function(model){
- var itemView = new ItemView({model : model});
- itemView.render();
- },
- render : function() {
- this.collection.each(this.renderItem);
- }
- });
On pourra donc ajouter des évènements sur notre view Item, pour ajouter du comportement à nos items.
Pour ajouter des évènements sur une Backbone.View :
- events :
- {
- "click .classname" : "mafonction"
- }