Intro à Backbone.js - #1 : les vues | KeiruaProd
Je suis développeur web freelance et propose des formations à Symfony2 ! Contactez-moi pour en discuter.

Cet article fait partie d’une série d’articles d’introduction à Backbone.js, largement inspirée du tutoriel (en anglais) Hello Backbone.js. Les bouts de code du tutoriel original ont été légèrement refactorés.

Backbone.js est une librairie très intéressante, mais un peu difficile à prendre en main. Des questions récurrentes sur le sujet amené à écrire cette petite série d’articles. Mon but, c’est de vous présenter cette librairie de manière plus simple que l’exemple « officiel » Backbone todos.js, qui est, disons, un peu raide.

Dans cette série donc, on va y aller de manière progressive, comme l’on pourrait procéder lors de la conception d’une application. Je ne toucherais pas au CSS et mettrais un minimum d’HTML, afin de nous concentrer sur Backbone. On va partir de quelque chose de très simple, et le faire évoluer, toujours de manière simple, vers une petite application, en essayant surtout de mettre en place des bonnes pratiques.

Backbone.js donc, est un framework javascript qui permet de faire du MVC côté client. Je sens que j’ai déjà perdu pas mal de monde, donc on va y aller tranquillement.
MVC, ça veut dire Modèle, Vue, Controlleur. C’est un design pattern qui permet de séparer les données, la logique qui effectue les opérations dessus, et leur affichage. C’est un framework très à la mode depuis quelques temps car il permet d’écrire du javascript plus propre et plus maintenable. En fait, ce framework n’ajoute pas énormément de fonctionnalités, vous pourriez très bien faire la même chose sans l’utiliser. Mais il apporte une logique de conception et de réflexion qui est très appréciée si vous voulez écrire du code côté client de qualité, plus facilement maintenable et évolutif.

Structure HTML

Entrons dans le vif du sujet, en écrivant le canvas HTML dans lequel nous allons écrire notre code. Rien d’original, on inclue 3 librairies que nous allons utiliser : jQueyr, underscore, et Backbone. jQuery va nous servir à accéder aux divers éléments de la page (à travers ce que l’on appelle l’arbre DOM), underscore va nous servir à manipuler des modèles, et backbone, ben… justement, nous allons découvrir son utilité.












Notre Hello world

Entre et , j’ai mis un commentaire pour indiquer où placer le bout de code qui arrive.
Nous allons faire le Hello world de Backbone.js : créer une vue qui affiche « Hello world », façon titre.
Pour celà, on crée une class AppView, héritée de Backbone.View.
3 choses sont à noter:
AppView contient une propriété el. Cette propriété référence un objet DOM créé dans le navigateur. Chaque vue en possède un. Nous utilisons jQuery pour affecter cet propriété à l’élément body.

Dans la méthode render, nous utilisons la propriété el pour afficher Hello World directement dans la page, via jQuery. Facile !

Enfin, AppView implémente lA méthodes initialize. Cette méthode fait office de constructeur: elle est appelée lors de l’instanciation (qui a lieu dans la ligne var appView = new AppView();).
Elle appelle la méthode render pour afficher notre « Hello world », mais appelle également _.bindAll. Cela nous permet de dire que dans la méthode render, l’élément this correspond à l’objet AppView courant. Toutes les méthodes qui veulent utiliser l’élément this de cette manière doivent être présentes dans la liste de méthodes de bindAll.



La démo de cet exemple est disponible ici.

Si on exécute ce bout de code… Tada ! On a fait un hello world !

Bonne pratique: utiliser les template

Allons maintenant un peu plus loin. Je vais profiter que le bout de code soit très simple, pour vous parler de template. Ca n’est pas nécessaire dans l’exemple actuel, mais va nous permettre d’aller plus rapidement par la suite, vu qu’on va pas mal s’en servir, et de commencer à prendre les bonnes habitudes que nous cherchons à avoir. En l’occurence, la bonne habitude, c’est séparer la logique, les données, et l’affichage.
Dans cet exemple, la logique, c’est la méthode render. Elle ne fait rien qu’afficher des données, mais elle pourrait contenir des traitements. Par contre, l’affichage mélange les données (« Hello world ») avec la manière dont elles doivent être affichées (entre des tags <h1>). On va séparer ça.
Un template, c’est un modèle d’affichage. On lui donne un nom, une structure HTML, et plus loin on s’en sert dynamiquement pour remplir son contenu avec des données.

Backbone dépend d’Underscore, qui propose une solution de templating qui va nous suffire. Sachez qu’il en existe de nombreuses autres, tels que mustachejs ou bien Handlebarsjs.

On va donc créer un template, en rajoutant ce bout de code avant la balise <script> de notre Hello world précédent :



Notre template a un id « helloTemplate » qui va nous permettre de récupérer son contenu par la suite. La partie originale, c’est
<%= content %>
Qui veut dire « affiche moi le contenu de la variable content ». C’est quoi content ? c’est une variable que nous allons passer en argument au template !

On peut maintenant modifier la méthode render. ce que l’on va y faire, c’est récupérer notre template, lui fournir des données, et afficher le contenu.

render: function(){
var helloTemplate = _.template ($("#helloTemplate").html());
$(this.el).append(helloTemplate ({'content':'Hello World'}));
}

Sauvegardez puis lancez votre nouveau bout de code… et Hello world est toujours affiché, rien n’a changé. C’est normal, nous avons juste refactoré notre code 🙂

La démo de cet exemple est disponible ici.

A noter que notre donnée, c’est ici « Hello world », et qu’elle n’est pas vraiment séparée de la logique d’affichage. Une chose à la fois, on va revenir la dessus dans les parties qui suivent, en parlant du modèle.

4 Réponses à “Intro à Backbone.js – #1 : les vues”

  1. Kortex Dit:

    Merci pour cet article et pour les suivants !

  2. ngita Dit:

    Merci pour le petit tuto, c’est clair et pratique, d’autres tutos?

  3. John Smith Dit:

    Bonjour.

    Merci pour ce tuto !

    Question idiote, je n’ai pas bien compris la partie avec le : _.bindAll(this, ‘render’);

    Quelle différence entre ça et passer « this » en argument de la fonction « render() » ?

    ex :
    render: function(machin){
    $(machin.el).append(« Hello world »);
    },
    initialize: function(){
    this.render(this);
    },

  4. John Smith Dit:

    Je m’auto réponds en donnant ce lien complet et intéressant : http://blog.bigbinary.com/2011/08/18/understanding-bind-and-bindall-in-backbone.html

Répondre

Unable to load the Are You a Human PlayThru™. Please contact the site owner to report the problem.