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.

On va reprendre l’exemple précédent, et le refactorer, afin de déléguer le rendu de notre modèle dans une vue dédiée. Cela va nous permettre de gagner en flexibilité pour manipuler les données au niveau atomique (au niveau des éléments du modèle), ce que nous ferons par la suite. Du point de vue fonctionnalité par contre, rien ne va changer : nous allons simplement améliorer la qualité du code.

Création d’une vue dédiée pour le modèle

Pour commencer, nous allons créer une vue dédiée ItemView pour l’affichage de notre modèle. Pour le moment, elle se contente de faire le lien entre notre modèle et son template. Vous pouvez noter que render() renvoit this, ce qui permet de chainer les appels :


var ItemView = Backbone.View.extend({
tagName: 'li', // name of (orphan) root tag in this.el
initialize: function(){
_.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
},
render: function(){
$(this.el).html(''+this.model.get('part1')+' '+this.model.get('part2')+'');
return this;
}
});

Maintenant, il faut modifier AppView, car ce n’est plus la méthode addItemToView qui est chargée de l’affichage des Item. On délègue l’affichage à la classe que l’on vient de créer.

addItemToView : function (item){
var itemView = new ItemView({
model: item
});
$('ul', self.el).append(itemView.render().el);
}

Une démo de ce code d’exemple est visible ici.

Et voila ! On peut maintenant ajouter des fonctionnalités à notre ItemView sans toucher au code de l’application. C’est ce que nous ferons dans la prochaine partie du tutoriel, pour supprimer ou modifier les éléments.

Répondre

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