BackboneJS

Les collections

Par Charles-Édouard Coste / @charlycoste

Lot de modèles

Au lieu de


var recetteA = new Recette();
var recetteB = new Recette();
var recettes = [recetteA, recetteB];

Préférez


var RecetteList = Backbone.Collection.extend({
 model: Recette
});
var recettes = new RecetteList();

Ajout/Suppression/Lecture

Nombre d'entités


recettes.length

Ajout d'une instance


recettes.add(recetteA);

Objet à l'index 0


recettes.at(0);

Objet dont l'id est 1


recettes.get(1);

Initialisation d'une collection



var json = [
 {id:'1', titre: 'Les œufs brouillés', status: 'publié'},
 {id:'2', titre: 'Les œufs à la coque', status: 'brouillon'},
 {id:'3', titre: 'Les œufs mollets', status: 'publié'}
];

recettes = new RecetteCollection(json);



var json = [
 {id:'1', titre: 'Les œufs brouillés', status: 'publié'},
 {id:'2', titre: 'Les œufs à la coque', status: 'brouillon'},
 {id:'3', titre: 'Les œufs mollets', status: 'publié'}
];

recettes.reset(json);

A partir d'un serveur


var RecetteCollection = Backbone.Collection.extend({
  url: '/recettes'
});
var recettes = new RecetteCollection();

On met à jour la liste

recettes.fetch(); // --> GET /recettes

Le serveur retourne...


[
 {id:'1', titre: 'Les œufs brouillés', status: 'publié'},
 {id:'2', titre: 'Les œufs à la coque', status: 'brouillon'},
 {id:'3', titre: 'Les œufs mollets', status: 'publié'}
]

recettes.length; // --> 3

Événements spécifiques aux collections

add	Quand un modèle est ajouté
remove	Quand un modèle est retiré
reset	Lors d'un reset() ou d'un fetch()


recettes.on('add', function(recette){
  ...
})

Tout événement d'un modèle est relayé par la collection

change	Quand un attribut est modifié
change:<attr>	Quand <attr> est modifié
destroy	Quand un modèle est détruit
sync	Quand une synchronisation réussie
error	Quand une validation ou une sauvegarde échoue
all	N'importe quel événement

Méthodes de collections

Lister les modèles dans la console


recettes.each(function(recette){
  console.log(recette.get('title'));
})

Créer un tableau des noms de recettes


recettes.map(function(recette){
  return recette.get('title');
})

Créer un tableau des recettes publiées


recettes.filter(function(recette){
  return recette.get('status') === 'publié';
})

Autres fonctions d'itérations

Toutes les méthodes de collection fournies par underscore.js sont disponibles

each	map	reduce
reduceRight	find	filter
where	findWhere	reject
every	some	contains
invoke	pluck	max
min	sortBy	groupBy
indexBy	countBy	shuffle
...

Affichage d'une collection


var RecetteListView = Backbone.View.extend({});
var recetteListView = new RecetteListView({ma_collection: recettes});

Attention au `this`!


render: function(){
  this.ma_collection.each(function(recette){
    var recetteView = new RecetteView({model: recette});
    this.$el.append(recetteView.render().el);
    // --> ce this n'est pas le bon
  });
}

Attention au `this`!


render: function(){
  this.ma_collection.each(this.ajoute, this);
}
ajoute: function(recette){
  var recetteView = new RecetteView({model: recette});
  this.$el.append(recetteView.render().el);
}

Synchronisation collection/vue


var RecetteListView = Backbone.View.extend({
  initialize: function(){
    this.listenTo(this.ma_collection, 'add', this.ajouteUnSeul);
    this.listenTo(this.ma_collection, 'reset', this.ajouteTout);
  },
  ajouteUnSeul: function(recette){
    var recetteView = new RecetteView({model: recette});
    this.$el.append(recetteView.render().el);
  },
  ajouteTout: function(){
    this.$el.empty();
    this.ma_collection.each(this.ajouteUnSeul, this);
  },
  render: function(){
    this.ajouteTout();
  }
});

Merci à tous

- backbonejs.org
- marionettejs.com
- Marionette Wires
- Anatomy of Backbone.js sur CodeSchool