BackboneJS Model, Collection & View

(Notes)

BackboneJS peut être considéré comme un Framework MVC ou le C signifie plutôt Collection. C’est un excellent choix pour les applications web type Single Page. On peut créer des applications plus fluides en évitant les aller/retour avec le serveur.

Backbone.Model

En l’encapsulant et en proposant des méthodes type accesseurs, la classe Backbone.Model permet de gérer du contenu sous la forme d’un objet JavaScript.

var Article = Backbone.Model.extend({});
var article = new Article({
  title: 'New Article'
});
 
article.get('title'); // New Article
article.set('title', 'New title');
article.get('title'); // New title
Backbone.Collection

Avec les méthodes conventionnelles comme push, pop, shift, unshift, add, length, remove, get , ou encore sort. La classe Backbone.Collection permet de gérer les collection de Model. On y retrouve aussi les méthodes existant dans Underscore.js.

var Article = Backbone.Model.extend({});
var Articles = Backbone.Collection.extend({
  model : Article
});
 
var articles = new Articles([{
  title: 'Article 1'
},{
  title: 'Article 2'
},{
  title: 'Article 3'
}]);
 
articles.push(articles.shift());
articles.models = articles.shuffle();
Backbone.Sync

Sync est le composant qui permet de synchroniser les objets à travers une API type RESTful JSON. Il faut donc lier les Model et les Collection à une ressource en utilisant l’attribut url.

var urlModel = 'http://backbonetests.fr/articles/1';
var urlCollection = 'http://backbonetests.fr/articles';
var Article = Backbone.Model.extend({
  url: urlModel;
});
 
var Articles = Backbone.Collection.extend({
  model: Article,
  url: urlCollection
});
Backbone.View

Tous les objets Backbone.View sont liés à un nœud DOM, et à n’importe quel moment cette vue pourra le générer de nouveau. Vue liée au DOMou DOM lié à la vue, les deux méthodes existent.

var View = Backbone.View.extend({
  render: function() {
    $(this.el).html(new Date().toLocaleTimeString());
    return $(this.el);
  }
});
 
var view = new View();

On peut aussi gérer les événements d’un nœud avec Backbone.View de façon très simple. Action + Sélecteur et c’est partie.

var View = Backbone.View.extend({
  render: function() {
    $(this.el).html(this.template);
    return $(this.el);
  },
  events: {
    'click #button1' : 'onClickButton1',
    'hover .button2' : 'onHoverButton2'
  },
  onClickButton1 : function() {
    alert('button1');
  },
  onHoverButton2: function() {
    alert('button2');
  }
});

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.