Cargando



Backbone.js - Colecciones de Modelos

En este tutorial veremos como podremos crear colecciones en Backbone.js.


abr 19 2014 02:18
Profesional
abr 22 2014 22:53
El objetivo de las aplicaciones es manejar datos dinámicos, a estos datos vamos a tener que aplicarles ciertas funciones y comportamientos de forma que un usuario pueda utilizarlos y sacarles algún beneficio.

Esto lo podemos lograr de muchas maneras y en Backbone.js tenemos las colecciones, que son estructuras que nos permiten agrupar modelos de forma ordenada, así podemos tener una colección de un tipo de modelo y saber que en ella vamos a contener todos los objetos de un determinado ámbito.

Colecciones

Como mencionamos las colecciones son grupos de modelos y pueden ser creadas al heredar de Backbone.Collection.

Importante
Normalmente al crear una colección debemos definir el tipo de modelo que esta va a contener en sí misma, junto con las propiedades de instanciación requerida por los modelos.


En la siguiente imagen hemos construido una colección, veamos el código y luego explicaremos que sucede en él:

backbone_coleccion_model.jpg


Primero hemos de definir nuestro modelo, le indicamos los atributos que posee, en este caso title y completed, luego definimos nuestra colección y le indicamos que tipo de modelo debe contener y acto seguido hemos creado un objeto que hereda de nuestro modelo y le inicializamos los atributos, hasta aquí es la parte de inicialización.

Luego pasamos a un objeto colección, el objeto de nuestro modelo en un array, esto nos dice que podemos pasar más de un objeto dentro de nuestro array y finalmente imprimimos el tamaño de la colección para confirmar que hemos almacenado todo correctamente.

Add y Remove

Como la idea es que todo sea dinámico podemos también añadir y remover modelos de nuestras colecciones, todo esto se realiza de una forma muy sencilla utilizando los métodos add y remove sobre el objeto de nuestra colección:

backbone_coleccion_model2.jpg


En la imagen vemos como seguimos con la estructura de modelo del primer ejemplo, pero en este caso creamos una nueva colección, le decimos que usaremos el mismo modelo y seguidamente creamos 3 objetos que extienden al modelo.

Hacemos una integración inicial de los objetos a y b, en un array se los pasamos a nuestra colección e imprimimos cuantos objetos tiene, en este caso nos indica que 2.

Luego utilizando el método add y pasándole por parámetro el objeto que queremos agregar, nuestra colección crece a 3 objetos, hasta ahora es muy sencillo este comportamiento y que pasa si queremos remover uno o más elementos, simplemente le pasamos al método remove un array, de la misma forma que lo hacíamos con el método add.

Terminamos removiendo los objetos a y b y al quedar solo c imprimimos nuevamente la cantidad de objetos y nos dice uno. Podemos también remover este último y la colección nos dirá que tiene 0 objetos y no tendremos ningún tipo de problemas.

Recordar
Existe la posibilidad de pasar objetos duplicados, pero si utilizamos la propiedad {merge:true} sus valores son unificados en vez de ignorados, esto lo podemos tener en cuenta en caso que nos ocurra alguna situación de este estilo.


Finalizando este tutorial ya sabemos que son las colecciones y como generarlas en Backbone.js, como vemos es una forma de ordenar nuestros objetos por ámbitos de manera tal que podamos utilizarlos con mucha, más facilidad en nuestra aplicación.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X