Este capítulo del Manual de Backbone.js lo vamos a dedicar a la implementación de eventos en el framework. En estos momentos ya debemos tener funcionando Backbone.js en nuestra página web y gracias a los conocimientos del artículo dedicado a Instalar backbone.js en la página, hemos podido poner en marcha nuestro primer script.

Si has leído la documentación publicada sobre BackboneJS hasta este punto en DesarrolloWeb.com, habrás podido entender la parte teórica de los eventos y por qué son tan fundamentales y útiles. Como sabes, la "magia" de BackboneJS comienza con los eventos, por ello no es mala idea que empecemos nosotros también por este asunto, metiéndole mano al código fuente.

En resumen, los eventos nos sirven para mantener comunicados a todos los actores en nuestra aplicación, tanto modelos, colecciones, vistas... ya que podemos definirlos sobre cualquier objeto y también escucharlos desde cualquier objeto, para realizar acciones cuando se produzcan.

Backbone.Events

Este es el módulo que se usa para trabajar con eventos en el framework, Backbone.Events y puede implementarse sobre cualquier objeto, no necesariamente objetos de Backbone, sino cualquier objeto Javascript en general. Gracias a su funcionalidad tendremos la posibilidad, entre otras cosas, de crear eventos personalizados, asignando funciones manejadoras y de desatar (invocar, disparar) esos eventos personalizados.

Para definir un evento sobre un objeto tenemos primero que extender dicho objeto con la clase Backbone.Events, para que podamos asignarle luego esos eventos personalizados.

//creo un objeto cualquiera con Javascript, usando notación JSON
var objeto = {};
//extiendo ese objeto con la clase Backbone.Events
_.extend(objeto, Backbone.Events);

A partir de ese momento, sobre nuestro objeto Javascript podremos invocar los métodos de Backbone.Events.

Asignar manejadores de eventos con on()

Usamos el método on() para asignar una función manejadora de eventos sobre un objeto, para un evento cualquiera. Este método recibe al menos dos valores, siendo el primero el nombre del evento que queremos crear y el segundo la función manejadora que asocial, que será invocada cuando se produzca ese evento.

objeto.on("mi_primer_evento", function(msg) {
alert("Se ha desencadenado el " + msg);
});

En este caso "mi_primer_evento" es el nombre del evento que estamos creando. La función anónima que se envía como segundo parámetro es el manejador de evento que estamos creando, también llamada función "callback".

Podemos asignar una misma función manejadora de eventos a varios eventos personalizados al mismo tiempo simplemente separando estos nombres de eventos con un espacio en blanco.

objeto.on("cambiar:hora cambiar:fecha", …);

Disparar eventos con trigger()

Una vez que hemos asociado una función manejadora con un objeto a ejecutar como respuesta a un evento personalizado, podemos "disparar" esos eventos con el método trigger().

El modo es muy sencillo, simplemente le indicamos el nombre del evento que queremos que se produzca y los parámetros que debe recibir el manejador de eventos.

objeto.trigger("mi_primer_evento", "evento que acabamos de crear.");

Con el código anterior hemos producido el evento personalizado "mi_primer_evento" que acabábamos de crear. Además le hemos indicado a trigger() un segundo parámetro que es recibido por la función callback asociada a ese evento.

En realidad, trigger() solo requiere un parámetro, que es el nombre del evento que queremos disparar, el resto de parámetros que le pasemos se enviarán a la función manejadora de eventos que se esté ejecutando.

//pasando varios datos a la función manejadora
objeto.on("varios_datos", function(dato1, dato2){
alert("se produjo el evento 'varios_datos' y he recibido " + dato1 + " y " + dato2);
});
objeto.trigger("varios_datos", "valor1", "valor2");

Variable "this" como contexto dentro de las funciones manejadoras de eventos

Es importante destacar el papel de la variable "this" dentro de las funciones manejadoras de eventos, que nos da una referencia al contexto donde se está ejecutando este código; dicho de otro modo, el objeto sobre el que se ha producido el evento.

Esto no debería generar muchas dudas, pero veamos no obstante el siguiente código.

//creo un objeto nuevo, al que le cargo algunos datos
var persona = {
nombre: "Miguel"
};
//extiendo el objeto para que soporte eventos de backbone.js
_.extend(persona, Backbone.Events);
//asigno una función manejadora a un nuevo evento
persona.on("segundo_evento", function(){
alert("Manejador de 'segundo_evento'...");
alert("muestro this.nombre: " + this.nombre)
});
//disparo ese nuevo evento
persona.trigger("segundo_evento");

Como resultado de ejecutar ese código, comprobarás que se muestra el nombre de la persona "Miguel", que hemos obtenido a través de this.nombre. O sea, "this", es una referencia al objeto que ha recibido el evento que se acaba de producir.

El módulo de eventos contiene otras funciones interesantes que veremos un poco después, como off() o one(). Os citamos para próximas entregas en las que seguiremos conociendo las posibilidades de los eventos en este framework.