Cargando



Backbone.js - Eventos en las Colecciones

En este tutorial veremos como trabajar con las colecciones utilizando el helper de Thorax para ellas.


jun 21 2014 20:52
Profesional
jun 23 2014 13:36
Como debemos saber las colecciones son una parte muy importante en Backbone.js para manejar los datos dinámicos de nuestra aplicación, sin embargo si solo dependemos de este probablemente tengamos que hacer una gran cantidad de código cada vez que necesitemos construir una vista que nos represente a nuestras colecciones.

Con el uso de Thorax podemos aprovechar las facilidades que nos ofrece esta extensión de forma de poder disminuir la cantidad de trabajo y así hacer aplicaciones en menor cantidad de tiempo y con un código más eficiente.

Helper de la Colección

Sabemos que un helper es una agrupación de métodos que nos ayuda con un tema en particular, en el caso de las colecciones el helper que tiene Thorax nos ayuda a generar vistas a partir de estas, con ello podemos reutilizar y escribir un código más eficiente y menos complejo, ello nos ayuda a mejorar el mantenimiento de nuestra aplicación, así como también la forma en que podemos desarrollar nuestras funcionalidades.

CollectionView
En el caso específico de Thorax tenemos el CollectionView, que es quien nos va a ayudar a tomar cada elemento de nuestra colección y generar una vista que puede cambiar según el comportamiento de dichos elementos.


Veamos un simple ejemplo de como este helper construye una vista a partir de una colección.

backbone_helper_coll_thorax.jpg


Esta colección recibe una cantidad de elementos, en este caso mascotas y cada una tendría un nombre, luego en nuestra aplicación Javascript tendríamos lo siguiente:


backbone_helper_coll_thorax2.jpg


Como vemos el helper nos ayuda a crear el elemento a partir de la colección con pocas líneas de código.

Atributos Disponibles

Para facilitar nuestra vida podemos utilizar una serie de atributos en nuestro HTML que nos proveen una interpretación por parte de Thorax que puede sernos útil, veamos cuales podemos utilizar:

item-template
Nos permite especificar una plantilla para cada modelo.

item-view
Es una clase que se utiliza cuando creamos cada vista de los elementos de la colección.

empty-template
Es la plantilla por defecto que se utilizará cuando la colección esté vacía, de esta forma podemos cubrir el caso de no tener resultados.

empty-view
Al igual que el caso de la plantilla vacía esta genera la vista para cuando no tenemos elementos en nuestra colección.


Bloques Condicionales

Existe una herramienta que son los bloques condicionales, que nos permiten especificar casos, de forma que nuestra colección pueda mostrar una vista u otra según el caso.


backbone_helper_coll_thorax3.jpg


En este caso vemos como definimos un elemento u otro en el caso que la colección no tenga elementos ya cargados, esto nos ahorra una cantidad de trabajo y validaciones que hacen que un código sea más complejo de lo necesario.

Bien con esto finalizamos este tutorial, como vemos Backbone.js y su flexibilidad nos da la puerta para utilizar las extensiones que nos permitan lograr ordenar nuestra aplicación de la forma en que deseemos, en el caso de los helpers, las funcionalidades que nos ayudan a construir son invaluables, lo importante es saber cómo utilizar estas ayudas y hacer el mejor código posible.

¿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