"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Eventos de Backbone

Hoy vamos a hablar del uso de los eventos de backbone, pero antes de nada y como es costumbre os dejo un enlace a la documentación oficial.

Backbone es un framework potente y muy flexible que nace con el fin de desarrollar aplicaciones en javascript de forma sencilla implementando el patrón MVC.
Es decir que dentro de Backbone podemos definir las vistas, los modelos y aunque no existe como tal un objeto controlador, sí que podremos crear nuestra lógica de aplicación en ficheros que comuniquen las vistas con el modelo y para ello entre otras cosas podemos usar los eventos de Backbone.

Os estareis preguntando que diferencia hay entre los eventos de Backboney los eventos de Javascript o de jQuery.
Pues muy sencillo, mientras que nosotros con JS o jQuery trabajamos con eventos que actuan sobre el DOM, los elementos de la página web que tenemos en el HTML, en Backbone trabajamos con los eventos del modelo, es decir que no apuntan al DOM sino a los Objetos del modelo.

Para ver como se usan los eventos de jQuery puedes visitar esta entrada.

Si te preguntas para que quieres eventos piensa en que una vez definido nuestro modelo podremos disparar eventos cuando el modelo cambie alguna propiedad, se le añadan o se le borren datos, cambie su estado de alguna manera o simplemente definiendo nosotros eventos propios que luego usaremos cuando sea preciso.

De hecho Backbone trabaja a la perfección con jQuery, así que no será nada raro ver un que un evento de jQuery dispara uno de Backbone o al contrario.
Piensa por ejemplo en un botón que al ser pulsado dispara un evento de un modelo cuya función recoge los datos y los pinta en pantalla.

En primer lugar vamos a ver cuales como preparar nuestro Objeto para que podamos usar los eventos de Backbone sobre él, luego cuales son los eventos que podemos usar pues de forma nativa están incluidos y por último como crear nuestro propios eventos.

Preparando nuestro Objeto

La manera de que un Objeto pueda utilizar los eventos de Backbone es haciendo que lo extienda de esta manera.

Por supuesto para que esto funcione tenemos que importar previamente la librería, y recordar también que Backbone depende de Underscore así que también necesitamos esta.
Hay muchas maneras de bajarlas y de incluirlas al proyecto, el post no trata de eso así que cada cual decide como.

Volviendo al código vemos que hemos declarado un Objeto mediante notación de paréntesis y lo hemos guardado en la variable miObjeto.
En la siguiente linea hacemos que ese Objeto extienda de Backbone.Events, con lo cual hereda sus métodos los cuales nos permiten trabajar con eventos.

Eventos nátivos de Backbone

A partir de ahora cuando hablemos de Modelo nos referimos al Objeto que definimos en Backbone para guardar los datos de la aplicación.

Por haber extendido Backbone.Events ahora tenemos una serie de eventos ya definidos que nuestro Objeto acaba de heredar, son los siguientes:

  • «add» (model, collection, options) — Cuando el modelo es añadido a una colección.
  • «remove» (model, collection, options) — Cuando el modelo es eliminado de una colección.
  • «update» (collection, options) — Cuando una colección es modificada por añadir o eliminar modelos de ella.
  • «reset» (collection, options) — Cuando una colección es «reseteada» (Vaciada eliminando todas las instancias que contiene).
  • «sort» (collection, options) — Cuando ordenamos una colección.
  • «change» (model, options) — Cuando uno de los atributos del modelo es modificado.
  • «change:[attribute]» (model, value, options) — Igual que el anterior pero pasando el nombre de un atributo, por lo que solo se dispara al modificar ese atributo en concreto.
  • «destroy» (model, collection, options) — Cuando el modelo es destruido.
  • «request» (model_or_collection, xhr, options) — Cuando un modelo es guardado en BBDD.
  • «sync» (model_or_collection, response, options) — Cuando un modelo es sincronizado contra la BBDD.
  • «error» (model_or_collection, response, options) — Cuando tratamos de guardar un modelo pero este falla.
  • «invalid» (model, error, options) — Cuando un módelo no pasa las validaciones que le hacemos en cliente.
  • «route:[name]» (params) — Se dispara cuando entramos en una ruta concreta, definimos el nombre de esta como un parámetro.
  • «route» (route, params) — Se dispara cuando entramos en cualquier ruta.
  • «route» (router, route, params) — Fired by history when any route has been matched.
  • «all» — Cuando disparamos cualquier evento de un modelo, para acotar podemos pasarle el nombre del evento como primer parámetro, si no lo hacemos quiere decir que es para todos los eventos definidos.

Como podemos apreciar, tenemos ya predefinidos un buen numero de eventos que cubren los casos de uso más comunes, esta bien que lo tengamos en cuenta pues si no los conocemos podríamos llegar a implementar soluciones en las que creamos un evento personalizado para hacer alguna de estas cosas y sería trabajar para nada.

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)