Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Backbonejs: Colecciones

 

Qué son las colecciones?

Básicamente es un array de objetos del mismo tipo, aunque no necesariamente deberían serlo, la idea es tener una un lugar desde donde tomar nuestros datos y guardarlos (al menos temporalmente) y tener un conjunto de métodos para filtrar y demás, adicionalmente podemos interactuar con el backend de la aplicación.

Ejemplo de una colección

Como primer ejemplo vamos a crear un modelo y luego una colección de ese modelo, sería así:

//declaramos el modelo
var Tarea = Backbone.Model.extend({
	defaults:{
		done: false
	}
});
//declaramos la colección
var Tareas = Backbone.Collection.extend({
	model: Tarea //indicar el tipo de modelo a la colección
				 //permite agregar elementos como json
});

//creamos una colección y le pasamos un array de modelos
//como declaramos el tipo de modelo backbonejs se encarga
//de generar cada uno sin nuestra ayuda
var tareas = new Tareas(
	[
		{"name": "comprar lechuga"},
		{"name": "llamar a Roger"},
		{"name": "ir a nadar"}
	]
);

console.log(tareas.toJSON());

Como vemos podemos indicar el tipo de modelo que va a manipular la colección a través del parámetro model esto nos permite agregar elementos luego pasando simplemente un json, la colección se va a encargar de instanciar la clase

image

Agregando elementos a la colección

Para agregar un elemento simplemente invocamos el método add, como hemos definido la propiedad model podemos agregar un json simplemente y la colección se encargará de generar un modelo

tareas.add({name: "ir al chino"});

Recuperando elementos de la colección

En este caso pasa algo interesante, backbone va a agregar un atributo cid a cada elemento de manera automática (client id) que podemos usarlo para manipular los elementos, en este caso para recuperar el primer elemento de la colección haríamos:

tareas.get("c1");

esto está bien, pero no tiene mucha relación con lo que nosotros definimos para nuestro modelo, podemos buscar por un atributo en particular

tareas.get({cid: "c3"});

sin embargo en el caso que nuestro modelo tuviera un atributo llamado id, cuando hacemos

tareas.get("1");

backbone busca por id en lugar de cid, bien.

Agregando métodos útiles a la colección

Una cosa interesante es agregar métodos para acceder a la colección interna, por ejemplo, con un filtro, algo así:

var Tareas = Backbone.Collection.extend({
	model: Tarea, //indicar el tipo de modelo a la colección
				 //permite agregar elementos como json
	getDone: function(){ //agregamos un método que retorne
						 //las tareas terminadas
		return this.where({done: true}); //el método where es de la clase base
	}
});

Ok, si lo invocamos retorna los elementos de la colección que tiene la propiedad done en true.

Eventos en las colecciones

Del mismo modo que podemos escuchar eventos del modelo podemos hacerlo con las colecciones, por ejemplo cuando se agrega o quita un elemento del siguiente modo:

//declaramos el modelo
var Tarea = Backbone.Model.extend({
	defaults:{
		done: false
	}
});
//declaramos la colección
var Tareas = Backbone.Collection.extend({
	model: Tarea, //indicar el tipo de modelo a la colección
				 //permite agregar elementos como json
	getDone: function(){ //agregamos un método que retorne
						 //las tareas terminadas
		return this.where({done: true}); //el método where es de la clase base
	}
});

//creamos una colección y le pasamos un array de modelos
//como declaramos el tipo de modelo backbonejs se encarga
//de generar cada uno sin nuestra ayuda
var tareas = new Tareas(
	[
		{"name": "comprar lechuga"},
		{"name": "llamar a Roger"},
		{"name": "ir a nadar"}
	]
);

tareas.on("add", function(){
	console.log("se ha agregador algo");
});

image

También podemos escuchar cambios en elemento dentro de la colección, es decir, en modelos

tareas.on("change", function(){
	console.log("algo ha cambiado");
});

 

Existen varios métodos más en las colecciones, por ejemplo para volver el estado al principio con reset, para sincronizar con el servidor con sync, etc. para no extendernos lo dejamos acá e iremos viendo eventualmente en otros ejemplos lo que falta.

Dejo el ejemplo completo acá. La próxima vamos a hablar sobre ruteo y después vamos a  ver el tema de interacción con el servidor.

Nos leemos.

Loading