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 dernière partie, nous allons ajouter des actions à la vue de chaque item, sans modifier l’application, afin de pouvoir supprimer des éléments ou inverser les valeurs de part1 et part2. Pour cela, nous allons tirer partie du refactoring de la partie précédente, afin d’ajouter la code là où cela a du sens.

Modification de l’ItemView

L’avantage d’avoir une vue dédiée pour l’affichage des item (ItemView) comme nous l’avons vu dans la partie précédente, c’est que l’on peut maintenant lui faire gérer la logique spécifique à notre vue. En l’occurence, nous allons ajouter la gestion d’opérations qui ont lieu au niveau des éléments la liste : la suppression d’un élément, ou la modification de l’un d’entre eux.

Commencons pour ajouter 2 « boutons » à notre template d’item, qui déclencheront les nouvelles actions :


Et maintenant, plus qu’à écouter les évènements correspondant au clic sur chacun des boutons, et effectuer les opérations correspondantes.
Il est nécessaire de surcharger Backbone.sync, la méthode de stockage persistant, par une coquille vide, afin d’éviter les erreurs, vu que l’on appelle model.destroy(); Dans un exemple plus complet, cette méthode est celle qui se charge de persister votre modele, soit dans un localStorage (sorte de stockage des données javascript client, plus évolué que les cookies), soit dans votre base de données, via une requete Ajax vers une page dédiée de votre serveur.

Dans la méthode initialize, on associe les évènements change et remove à nos méthodes d’affichage et de suppression de la vue: render affiche notre donnée grâce au template associé au modele, et unrender supprime l’élément créé.
Swap se charge d’inversion part1 et part2. l’appel de set déclenche l’évènenemt « change », qui entraine un réaffichage. Pour la suppression, on utilise la méthode model.destroy pour supprimer l’élément de sa collection.


Backbone.sync = function(method, model, success, error){
success();
}

var ItemView = Backbone.View.extend({
tagName: 'li',

events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},

initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove');

this.itemTemplate = _.template($('#itemTemplate').html());

this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},

render: function(){
$(this.el).html(this.itemTemplate({item:this.model}));

return this;
},

unrender: function(){
$(this.el).remove();
},

swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
};
this.model.set(swapped);
},

remove: function(){
if (confirm ('Etes vous sur de vouloir supprimer cet element ?'))
this.model.destroy();
}
});

Comme dans les précédents articles, une démo est disponible ici.

Cette série d’articles d’introduction a Backbone.js est terminée, et devrait maintenant vous permettre d’attaquer plus sereinement le tutoriel « officiel » Todos.js. Et si vous trouvez que Backbone en fait un peu trop pour vos besoins, peut-être pouvez vous utiliser une autre librairie pour faire du MVC côté client ? Dans ce cas, je vous suggère de jeter un coup d’oeil du côté de TodoMVC, plusieurs tutoriels sur comment faire du MVC avec les framework javascript les plus populaires.

Répondre

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