Gorille gris

Memento Backbone.js

Backbone est un framework javascript MVC qui permet de construire des applications de type Single-Page-Webapp.

En vérité il s’agit plutôt d’un framework MV* car le Controller n’existe pas vraiment dans Backbone.

Faisons un parrallèle entre un MVC classique et un MVC Backbone.

Models #

Controllers #

Views #

Pense-bête pour le Model #

Méthodes native à Backbone #

Ecoute sur un Model #

Pense-bête pour la View #

La méthode render() de la View peut être liée à la méthode change() du Model. Ainsi dès qu’il y a un changement dans le Model, la View refléte immédiatement ces changements.

setElement() #

Colle un template HTML a une vue.

var view = new Backbone.View;
view.setElement('<p><a><b>test</b></a></p>');
view.el // <p><a><b>test</b></a></p>

render() #

A la fin de render() il est bien de faire return this car :

Pense-bête Collection #

Syntaxe #

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

var TodosCollection = Backbone.Collection.extend({
  model: Todo
});

Ajout suppression de Models #

Une fois la Collection créée, on peut supprimer ou ajouter des Models à la Collection avec : add() et remove(). Ces 2 méthodes acceptent un ou plusieurs model en paramètre (sous forme de tableau [])

Retrouver un Model #

Collection.get(id) avec id l’id du Model

var myTodo = new Todo({title:'Read the whole book', id: 2});
var todos = new TodosCollection([myTodo]);
var todo2 = todos.get(2);

Afin d’intentifier le Model récupéré on peut utiliser : id cid idAttribute

Chaque Model a un id qui est unique (type Integer ou String)
idAttribute est l’attribut qui identifie le Model dans la database (id dans la base de donnée). Ca dit a Backbone quel champ de la base de donnée doit être remplir avec la propriété id. Exemple userId dans la base donnera un userId dans la définition du Model dans Backbone.

Ecouter des événements #

var TodosCollection = new Backbone.Collection();
TodosCollection.on("change:title", function(model) {
    console.log("J'ai changer d'avis, je devrais " + model.get('title'));
});
TodosCollection.add([
  { title: 'go to Jamaica.', completed: false, id: 3 },
]);
var myTodo = TodosCollection.get(3);
myTodo.set('title', 'aller nager');

Va afficher : J'ai changer d'avis, je devrais aller nager

Fonctionnalités héritées d’Underscore #

Persistence RESTful #

Récupérér un Model du serveur #

Collection.fetch() retrouve un ensemble de Models du server sous la form d’un tableau JSON en envoyant une requête HTTP GET vers l’URL spécifié par la propriété url de la Collection. Quand les données sont récupérées, la fonction set() va être exécuté pour mettre à jour la Collection.

Sauvegarder un Model sur le serveur #

On utilise la méthode save() du Model que l’on veut sauvegarder.

Supprimer un Model du serveur #

Avec destroy() : envoie une requête HTTP DELETE

Options #

Il est possible de passer seulement les choses que l’on veut mettre à jour dans un Model et pas forcememnt tout le Model (requête HTTP PATCH). Par exemple :

// Sauvegarde partielle avec PATCH
model.clear().set({id: 1, a: 1, b: 2, c: 3, d: 4});
model.save();
model.save({b: 2, d: 4}, {patch: true});
console.log(this.syncArgs.method);
// 'patch'

Events #

on() off() trigger() #

Backbone.Events peut donner à un objet la capacité de lié et déclencher des événements personnalisés.

on() lie une fonction callback à un objet. Le callback est appelé à chaque fois que l’événement est déclenché.

var myObject = {};

// Mixin
_.extend(myObject, Backbone.Events);

// Ajouter un événement personnalisé
myObject.on('dance', function(msg){
  console.log('Déclenchement de ' + msg);
});

// Trigger the custom event
myObject.trigger('dance', 'our event');

off() supprime toutes les fonctions de callback sur un objet

// Removes event bound to the object
myObject.off("dance:tap");

Pour supprimer une callback en particulier :

var ourObject = {};

// Mixin
_.extend(ourObject, Backbone.Events);

function dancing (msg) { console.log("We are dancing. " + msg); }
function jumping (msg) { console.log("We are jumping. " + msg); }

// Add two listeners to the same event
ourObject.on("move", dancing);
ourObject.on("move", jumping);

// Trigger the events. Both listeners are called.
ourObject.trigger("move", "Yeah!");

// Removes specified listener
ourObject.off("move", dancing);

// Trigger the events again. One listener left.
ourObject.trigger("move", "Yeah, jump, jump!");

trigger() peut passer plusieurs arguments à une fonction callback

var ourObject = {};

// Mixin
_.extend(ourObject, Backbone.Events);

function doAction (action, duration) {
  console.log("We are " + action + ' for ' + duration ); 
}

// Add event listeners
ourObject.on("dance", doAction);
ourObject.on("jump", doAction);
ourObject.on("skip", doAction);

// Passing multiple arguments to single event
ourObject.trigger("dance", 'dancing', "5 minutes");

// Passing multiple arguments to multiple events
ourObject.trigger("dance jump skip", 'on fire', "15 minutes");

listenTo() et stopListening() permet à un objet {d’écouter/ arrêter d’écouter} les événements sur un autre objet.

Chaque fois qu’on fait on() sur un objet on doit faire aussi off(), sinon quand on supprimer un Model il va rester en mémoire. View.remove() fait un appel à stopListening() afin de s’assurer que tous les écouteurs sont déliées.

Events et Views #

2 types d’événements peuvent être lié à une View :

Routers #

Connecte des URLs à des parties de l’application. Nécessaire si tu veux que certaines parties de ton application soient : mise dans les favoris, partageable, si tu veux pouvoir faire un Back avec le bouton back du navigateur.

var TodoRouter = Backbone.Router.extend({
	routes: {
		"search/:query/p:page" : "searchTodos"
		// http://example.com/#search/job/p1
	}
});
var myTodoRouter = new TodoRouter();

Backbone.history.start(); dit à Backbone qu’il fait observer tout changement de hash dans l’URL (d’où le /# hyper vitale)