Novedades en Backbone 0.9.2

A principios de este año salió la versión 0.9 de backbone.js, importante actualización desde su última versión estable 0.5.3. Posteriormente ha habido dos pequeñas actualizaciones adicionales y la versión actual de la librería es la 0.9.2, la cual se considera como una release candidate de la futura versión 1.0. Voy a enumerar y a explicar las principales novedades que se han incorporado a la librería, en base a lo que ya se haya explicado en el tutorial.

Adicionalmente, la librería underscore.js sobre la que se apoya Backbone también ha sido actualizada, y tendremos que hacer uso de la versión 1.3.1 o superior de la librería si queremos utilizar la versión 0.9.2.

Sin más preámbulos, empecemos a ver las principales novedades según su ámbito dentro de la librería.

Core

Se han realizado pequeñas mejoras, aparte de corrección de algunos bugs y algunas optimizaciones. Los principales cambios a destacar son:

• las funciones bind() y unbind() se han renombrado a on() y off(), siguiendo la misma filosofía que jQuery a partir de su versión 1.7. Las originales siguen siendo válidas.
• A la hora de capturar eventos  (bind() u on()) o a la hora de generarlos (trigger()) podremos hacerlo sobre varios eventos a la vez, separando éstos por espacios. Ejemplo: modelo.on(‘change:name change:age’).
• Si en nuestra página tenemos varias versiones de jQuery o Zepto.js, podremos indicar qué manipulador DOM deseamos utilizar a través del método Backbone.setDomLibrary().

Vistas

• Ahora podemos desenlazar manualmente los eventos delegados en una vista mediante undelegateEvents(). En el tema sobre vistas vimos cómo podíamos definir qué eventos queríamos capturar dentro de todos los elementos de una vista, gracias a la delegación de eventos. Si por ejemplo queremos desactivar dicha vista y que no responda a dicho comportamiento, podemos eliminar los eventos delegados con esta función.
• En el hash events donde realizábamos la delegación de eventos, debíamos especificar como valor de cada entrada una cadena de caracteres con el nombre de la función a ejecutar. Ahora podremos especificar la propia función, no necesariamente definir su nombre.
• Las vistas tendrán una versión cacheada de la referencia jQuery (o Zepto) de el, y podremos acceder a ella a través de la propiedad $el. De esta forma, no tendremos que estar haciendo el típico $(this.el).loquesea() todo el rato. Además, ahora debemos utilizar el método de vista setElement() para establecer el valor de el, y así asegurarnos de que se actualizan correctamente tanto view.el como view.$el, además de encargarse de hacer de nuevo la delegación de eventos en el nuevo elemento DOM enlazado.

Modelos

• Ahora la propiedad urlRoot de los modelos podrá ser una función, además de una cadena de caracteres como hasta ahora.
• Se ha añadido un nuevo evento «sync», el cual se dispara cada vez que el modelo se sincronice satisfactoriamente con el servidor (operaciones create(), save(), destroy())
• Podremos acceder a un hash llamado changed donde se expondrán aquellos atributos modificados desde el último evento «change». Este hash será un delta, es decir, únicamente aparecerán aquellos atributos modificados.

Colecciones

• Se han añadido los métodos shuffle e initial al conjunto de métodos Underscore que se incorporan a las conlecciones. Hay que recordar que Underscore ofrece un conjunto de operaciones que podremos utilizar sobre las colecciones de modelos.
• Se han añadido las operaciones push (añadir modelo al final), pop (devuelve y elimina el último modelo), unshift (añadir modelo al principio) y shift (devuelve y elimina el primer modelo).
• Para realizar búsquedas en una colección normalmente utilizamos la función filter() de Underscore. En esta nueva versión se introduce la función where(), realizando un filtrado simple por atributos. Es decir, pasando un hash de atributos con el valor apropiado, se nos devolverá todo modelo de la colección que tenga el mismo valor en los atributos especificados.
• Las operaciones de colección create() y destroy() para creación y destrucción de modelos dentro de una colección ahora son optimistas por defecto, lo cual significa que la operación se realizará sobre la colección sin esperar a que el servidor conteste. Si recordamos, estas operaciones llevaban implícita una sincronización con el servidor, donde la versión anterior de la librería esperaba a que el servidor diera el visto bueno para incluir o destruir el modelo dentro de la colección. Ahora no es así, salvo que se indique que sí deseamos esperar al servidor a través del parámetro de configuración {wait: true} pasado en en el hash de opciones.Si no especificamos esta opción,  a pesar de que la operación se realice instantáneamente sobre la colección, se disparará el evento ‘sync’ cuando el servidor responda, por lo que podremos capturarlo para hacer cualquier procesamiento posterior. Alternativamente podremos seguir especificando una función de success en el hash de opciones.

Migrar nuestro código a la nueva versión 0.9.2

Teniendo en cuenta las anteriores novedades, y si queremos actualizar nuestro código a esta nueva versión, habrá que tener cuidado en los siguientes casos:

• No asignar directamente nada a view.el, sino hacer uso de la función setElement
• En vez de hacer $(view.el), recordad que podremos acceder a la versión ya cacheada view.$el
• Si necesitamos crear/eliminar un modelo en una colección y necesitamos conocer la respuesta del servidor, establecer {wait:true} al invocar la función create() o destroy(). Por ejemplo, podríamos necesitar saber el ID de servidor asignado al nuevo modelo justo en el instante de la creación.
• Asegúrate de actualizar también la librería underscore.js

Y básicamente esto es todo, al menos hasta que salga la versión 1.0, aunque no se espera que para esa versión se introduzcan demasiadas novedades, salvo algunas correcciones de bugs y cambios menores, pues como hemos dicho, esta versión 0.9.2 ya se considera una release candidate de la 1.0