Avec Backbone.js

Modèles

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

var recetteItem = = new RecetteItem(
  {id:'23', title: 'Les œufs brouillés', status:'publié'}
);

Accesseur en lecture

recette.get('titre');

Accesseur en écriture

recette.set({status: 'publié'});

Synchronisation serveur

recette.save();

Vues

var RecetteView = Backbone.View.extend({
  render: function(){
    var html = '
' + this.model.get('titre') + '
';
    $(this.el).html(html); // ou alors: this.$el.html(html)
  }
});

var recetteView = new RecetteView({
  model: recetteItem
});

recetteView.render();

console.log(recetteView.el);

  
Les œufs brouillés

Les modèles en détail

Récupération de données

var RecetteItem = Backbone.Model.extend({
  urlRoot: '/recettes'
});

Chargement de la recette avec id=1

var recetteItem = new RecetteItem({id: 1});
recetteItem.fetch();

// --> GET /recettes/1

Mise à jour de la recette

recetteItem.set({titre: 'Les œufs mollets'});
recetteItem.save();

// --> PUT /recette/1

Création et suppression

var recetteItem = new RecetteItem();
recetteItem.set({titre: 'Les œufs pochés'});
recetteItem.get('id');
// --> ''
recetteItem.save();
// --> POST /recettes

recetteItem.get('id');
// --> 24
recetteItem.destroy();
// --> DELETE /recettes/24

Modèle vers JSON

recetteItem.toJSON();
// --> {id:'24', titre:'Les œufs pochés', status: null}

Valeurs par défaut

var RecetteItem = Backbone.Model.extend({
  defaults: {
    titre: 'Nouvelle recette',
    status: 'brouillon'
  }
});

var recetteItem = new RecetteItem();

recetteItem.get('titre'); // --> 'Nouvelle recette'

recetteItem.get('status'); // --> 'brouillon'

Modèles et événements

recetteItem.on('evenement', function(){
  alert('événement déclenché');
});

recetteItem.trigger('evenement');

Événements standards

recetteItem.on(<event>,<method>)

Les vues en détail

Les bases

var RecetteView = Backbone.View.extend({});
var recetteItem = new RecetteView();

console.log(recetteItem.el);
// --> 

var RecetteView = Backbone.View.extend({
  tagName: 'h3',
  id: 'recette-node',
  className: 'highlight'
});
var recetteItem = new RecetteView();

console.log(recetteItem.el);
// --> 

De jQuery à Backbone

jQuery courant

$('#recette-node').html()

`el` est un élément DOM

$(recetteView.el).html()

Version avec alias

recette.$el.html()

(l'ID peut changer, le `$el` reste)

Reprise de l'exemple

var RecetteView = Backbone.View.extend({
  tagName: 'h3',
  className: 'highlight',
  id: 'recette-node',
  render: function(){
    this.$el.html(this.model.get('titre'));
  }
});

var recetteView = new RecetteView({model: recetteItem});
recetteView.render();
console.log(recetteView.el);
// --> 
Les œufs pochés

Utilisation de templates

var RecetteView = Backbone.View.extend({
  // ...
  template: _.template('<%= titre %>') // moteur de underscore.js
  render: function(){
    var attributes = this.model.toJSON();
    this.$el.html(this.template(attributes));
  }
});
            

Moteurs de templates

Underscore.js

<%= description %>

Mustache.js

{{ description }}

Haml-js

%h3= description

Eco

<%= description %>

la fin de la foire aux écouteurs

Avant

function alertClick(e){
  alert("Un click a eu lieu!");
}
$('h3').click(alertClick); // s'applique sur tous les h3
            

Avec Backbone

var RecetteView = Backbone.View.extend({
  events: {
    'click h3': 'alertClick' // restreint aux descendants de `el`
  },
  alertClick: function(e){
    alert("Un click a eu lieu!");
  }
});
            

Dans les coulisses...

this.$el.on(<event>, <selector>, <callback>)