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.

Dans cette partie, nous allons voir comment créer une collection de modèles pour stocker les données, et les associer à une vue.

Le modèle

Les choses sérieuses commencent. Nous allons créer notre premier modèle. Un modèle, c’est dont une structure de donnée qui représente les informations que l’on va manipuler. Dans la partie précédente, nous n’avons pas créé de modèle matériellement : lors d’un clic, nous avons ajouté un élément au DOM, mais nous n’avons pas vraiment de trace de ce qui est fait. Si nous souhaitons par la suite manipuler les données, les choses peuvent devenir un peu compliquées.
Afin de garder un trace de ce que nous manipulons, nous allons créer un modèle qui représente les éléments de la liste que nous avions affiché précédemment. Afin de rester simple, nous allons faire que chaque élément contienne 2 propriétés, part1 et part2, qui stockeront chacunes un mot.

Accrochez vous bien, ça va aller très vite :

var Item = Backbone.Model.extend({
});


Normalement, vous devriez trouver que ce bout de code est un peu vide. Où sont part1 et part2 ? Il n’y a pas besoin de les déclarer. En javascript, il n’y a pas besoin de déclarer les variables. On pourrait très bien créer une instance d’Item et affecter la propriété part1 directement, cela ne sera pas un souci. On pourrait même aller chercher directement les données via de l’ajax et remplir une liste… tiens, c’est ce que font pas mal de gens. Mais je dérive; pour le moment, on va quand même affecter des valeurs par défaut à part1 et part2:


var Item = Backbone.Model.extend({
defaults: {
part1: 'Hello',
part2: 'world '
}
});

Si c’est nécessaire, vous pouvez également rajouter une méthode initialize, qui comme pour les vues, embarque de la logique lors de l’instanciation.

Manipuler les propriétés du modèle

Il est très facile d’accéder aux propriétés. Il faut pour cela utiliser les méthodes get et set, dont l’utilisation est résumée dans l’exemple qui suit. get renvoit la valeur associée à une propriété, et set permet d’affecter une ou plusieurs valeurs.

var myItem = new Item();
myItem.set({part1 : "Salut"});
alert( myItem.get("part2") );

La collection

Un collection, c’est tout simplement une liste d’objets correspondant au modèle donné. Ca va nous permettre de manipuler notre liste. On crée une collection spéficique en référencant le modèle d’éléments auquel elle est associée, comme vous pouvez le voir :


var List = Backbone.Collection.extend({
model: Item
});

L’application

Je mets tout à la fois, car au fond, peu de choses changent.


var AppView = Backbone.View.extend({
el: $('div#item_list'),
events: {
'click button#add': 'addItem'
},

initialize: function(){
_.bindAll(this, 'render', 'addItem', 'addItemToView'); // Toutes les fonction qui utilisent 'this' en tant que l'objet courant doivent être présentes ici
this.collection = new List();
this.collection.bind('add', this.addItemToView); // On enregistre une méthode à appeler lors de l'évènement 'add'

this.itemTemplate = _.template($('#itemTemplate').html());
this.counter = 0;
this.render();
},
render: function(){
var self = this;
_(this.collection.models).each(function(item){
addItemToView(item);
}, this);
},

addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item); // On ajoute un élément -> déclenche un evenement "add"
},

addItemToView : function (item){
$('ul', self.el).append(this.itemTemplate({'item': item}));
}
});

Une démo de cet exemple est disponible ici.

Pour commencer, on fait pointer la propriété el de notre vue sur le div contenant notre liste.

La gestion dest évènements fonctionne d’une manière un peu particulière. Il est en effet possible d’écouter les évènements qui altère notre collection. Vous pouvez noter que dans initialize, on instancie une liste, et qu’on associe l’évènement add de la collection à la méthode addItemToView :

this.collection.bind('add', this.addItemToView);

Cela veut dire que lorsque notre liste déclenche un évènement add, il faut appeler la méthode addItemToView. Quand la liste va-t-elle déclencher un évènement add ? Lorsque l’on appelle la méthode… add sur la collection. Et ceci arrive lorsque l’on clique sur le bouton, qui appelle alors la méthode addItem.

Vous pouvez également remarquer que dans la méthode render, on sauvegarder dans la variable self une référence vers this. En effet _.each, qui nous permet d’itérer sur la liste, prend en arguement la méthode à appliquer à chacun des éléments de la liste. A l’intérieur de cette méthode, l’objet this correspond à la fonction dynamique, et non à l’objet correspondant à la vue, d’où la nécessité de le sauvegarder pour s’en servir.

Le reste, c’est du code déjà vu.

Répondre

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