Tutorial de Backbone.js – I. Eventos

Introducción

En este primer tema me gustaría explicar lo que considero el componente más transversal de Backbone: la gestión de eventos. Entendiendo el sistema de eventos asentaremos las bases que nos ayudarán a entender mejor los distintos componentes que veremos en sucesivos temas.

Backbone.Event

La librería Backbone se apoya en el concepto de evento como método principal de comunicación entre componentes. Cada uno de los elementos de Backbone será capaz de emitir y capturar eventos para conectar los distintos elementos de la aplicación.

Backbone tiene un pequeño módulo de eventos que puede utilizarse para extender cualquier objeto de nuestra aplicación, dotándole de esta forma de la posibilidad de enviar y capturar eventos arbitrarios.

Para que un objeto posea la capacidad de capturar y enviar eventos, debe extender Backbone.Events con la función _.extend de underscore.js:

var mi_objeto = {};
MiObjeto=_.extend(mi_objeto, Backbone.Events);
 
// Con la funcion bind podemos enlazar un evento cualquiera con una
// función callback que se ejecutará cuando este evento ocurra en este objeto
mi_objeto.bind("un_evento", function(msg){
    alert('Vaya, ha ocurrido un_evento con mensaje' + msg);
});
 
// Un objeto puede disparar un evento en el momento que desee
// utilizando la función trigger
mi_objeto.trigger('un_evento','de_ejemplo');

Un evento se identifica por una cadena de caracteres arbitraria, aunque por convenio, si una aplicación utiliza un número alto de eventos se recomienda separar identificadores entre símbolos de dos puntos para establecer espacios de nombres. Ejemplos: ‘actualizar:sidebar’ o ‘alerta:nivel1’. Más adelante veremos cómo el propio Backbone hace uso de este convenio para sus propios eventos.

Enlazado de eventos: binding

Como hemos visto en el ejemplo anterior, con la función bind(event, callback, [context]) podemos enlazar un evento a una función callback que se ejecutará cuando este evento se dispare en el contexto del objeto enlazado. Opcionalmente, podremos incluir un contexto sobre el que se ejecutará la función callback, ya que por defecto se ejecutará en el contexto del objeto que recibe el evento (en el ejemplo, this será mi_objeto).

Existe un evento especial llamado ‘all’ que nos permitirá enlazar todos los eventos de un objeto a una misma función callback, a la cual se le pasará como parámetro el nombre del evento:

mi_objeto.bind('all', function(nombre_evento){
  // Implementación
}

Un mismo objeto podrá enlazar tantas funciones como desee a un mismo evento:

mi_objeto.bind('un_evento', function(){
    alert('Función callback 1');});
mi_objeto.bind('un_evento', function(){
    alert('Función callback 2')});
mi_objeto.trigger('un_evento'); // Se ejecutan los dos alert;

Desenlazado de eventos: unbinding

Para desenlazar los eventos enlazados, utilizaremos unbind([evento], [callback]) donde opcionalmente aceptará un nombre de evento y una función callback desenlazar. Si no se especifica ninguna función callback, se desenlazarán todas las funciones asociadas al evento especificado, y si no se especifica ningún evento, se desenlazarán todas las funciones de todos los eventos del objeto:

mi_objeto.unbind('mi_evento', miFuncionCallback); // Desenlaza solo la función miFuncionCallback del evento mi_evento
mi_objeto.unbind('mi_evento');                    // Desenlaza todas las funciones callback del evento mi_evento
mi_objeto.unbind();                               // Desenlaza todas las funciones de todos los eventos

Generación de eventos: triggering

Un objeto también podrá disparar cualquier evento en cualquier momento haciendo uso de trigger(event, [*args]) a la que le indicaremos un nombre de evento y opcionalmente una cadena de parámetros que se pasarán como argumentos a la función callback enlazada:

mi_objeto.bind('mi_evento', function(arg1, arg2){
    alert('Evento que recibe 2 argumentos');
});
mi_objeto.trigger('mi_evento', 'primer argumento', 'segundo argumento');

Resumen

En este tema hemos visto lo fácil que es dotar a nuestros objetos de la capacidad de generar y recibir eventos gracias a Backbone.Event.Como veremos, este mecanismo será ampliamente utilizado en el resto de componentes de Backbone.

En el siguiente tema analizaremos uno de los principales componentes de backbone: los Modelos.