Cuando hablamos de eventos avanzados nos referimos a las posibilidades que nos ofrece Backbone.js de hacer más con los mismos, podemos desvincular un evento de un objeto en el transcurso de nuestra aplicación, así como también establecer objetos que se encarguen de escuchar cuando un objeto diferente llama a un evento, logrando así que nos liberemos de la carga lógica de tener que programar estos comportamientos por separado.
Desvincular un Evento con el Método .off()
La desvinculación de un evento nos permite que no se ejecute la función callback luego que haya sucedido, esto tiene muchas aplicaciones lógicas que nos permiten ejercer un mejor control en nuestras aplicaciones.
Para realizar la desvinculación nos vamos a apoyar en el método .off() que se llama en una forma similar a la que utilizamos con el método .on(), le pasamos el evento haciendo la invocación desde el objeto que ya tiene las funcionalidades de Backbone.Events. Veamos el siguiente código de ejemplo:
Como vemos en el código primero hacemos todo el trabajo de vinculación de funcionalidades, construimos un evento personalizado e inclusive hacemos el primer llamado al mismo, luego de esto con el método .off() le decimos que ya el evento no va a estar vinculado al objeto y finalmente para comprobarlo volvemos a llamar al evento donde ya no ocurre más nada.
Esto lo podemos ver demostrado en la siguiente imagen donde ejecutamos en la consola Javascript de Google Chrome el código del ejemplo:
![backbone_eventavanz.jpg]()
Escucha por Eventos
Esta funcionalidad nos permite utilizar un objeto para “escuchar” a otro, donde podemos definir a “escuchar” como el proceso en el cual el objeto que “escucha” queda atendiendo las acciones del objeto “escuchado”, por lo que cuando el último detona un evento, el primero podrá llamar a la función callback correspondiente. Veamos a que nos referimos con el siguiente código:
Aquí simplemente vinculamos el funcionamiento de Backbone.Events a tres objetos, el objeto “a” será quien escuche lo que sucede en los otros objetos, luego definimos nuestros eventos personalizados, entonces al momento de detonar el evento en el objeto “b” el objeto “a” ejecuta el callback correspondiente.
Para finalizar este tutorial veamos la salida de nuestro código en la consola Javascript de Google Chrome:
![backbone_eventavanz2.jpg]()
Desvincular un Evento con el Método .off()
La desvinculación de un evento nos permite que no se ejecute la función callback luego que haya sucedido, esto tiene muchas aplicaciones lógicas que nos permiten ejercer un mejor control en nuestras aplicaciones.
Para realizar la desvinculación nos vamos a apoyar en el método .off() que se llama en una forma similar a la que utilizamos con el método .on(), le pasamos el evento haciendo la invocación desde el objeto que ya tiene las funcionalidades de Backbone.Events. Veamos el siguiente código de ejemplo:
var nuestroObj = {};
// Creamos el Mixin que nos permite asociarnos con la clase Backbone.Events
_.extend(nuestroObj , Backbone.Events);
// Creamos el evento personalizado
nuestroObj.on('bailar', function(msg){
console.log('nuestro evento es ' + msg);
});
// Detonamos el evento personalizado con .trigger()
nuestroObj.trigger('bailar', 'un baile');
// Desvinculamos el evento
nuestroObj.off('bailar');
//Al intentar llamarlo nuevamente no ocurre nada
nuestroObj.trigger('bailar', 'un Nuevo baile');
Como vemos en el código primero hacemos todo el trabajo de vinculación de funcionalidades, construimos un evento personalizado e inclusive hacemos el primer llamado al mismo, luego de esto con el método .off() le decimos que ya el evento no va a estar vinculado al objeto y finalmente para comprobarlo volvemos a llamar al evento donde ya no ocurre más nada.
Esto lo podemos ver demostrado en la siguiente imagen donde ejecutamos en la consola Javascript de Google Chrome el código del ejemplo:
Escucha por Eventos
Esta funcionalidad nos permite utilizar un objeto para “escuchar” a otro, donde podemos definir a “escuchar” como el proceso en el cual el objeto que “escucha” queda atendiendo las acciones del objeto “escuchado”, por lo que cuando el último detona un evento, el primero podrá llamar a la función callback correspondiente. Veamos a que nos referimos con el siguiente código:
var a = _.extend({}, Backbone.Events);
var b = _.extend({}, Backbone.Events);
var c = _.extend({}, Backbone.Events);
// agregamos un objeto (a) que escucha a los eventos de (<img src='http://www.solvetic.com/public/style_emoticons/default/cool.png' class='bbc_emoticon' alt='B)' /> y (c)
a.listenTo(b, 'evento1', function(event){
console.log("un evento pasa en (<img src='http://www.solvetic.com/public/style_emoticons/default/cool.png' class='bbc_emoticon' alt='B)' />"); });
a.listenTo(c, 'evento2', function(event){
console.log("otro evento pasa en (c)"); });
// detonamos el evento
b.trigger('evento1'); // imprime el log
// removemos la escucha
a.stopListening();
// ya no ocurre mas nada
b.trigger('evento1');
c.trigger('evento2');
Aquí simplemente vinculamos el funcionamiento de Backbone.Events a tres objetos, el objeto “a” será quien escuche lo que sucede en los otros objetos, luego definimos nuestros eventos personalizados, entonces al momento de detonar el evento en el objeto “b” el objeto “a” ejecuta el callback correspondiente.
Importante
Podemos también terminar la escucha con el método stopListening() sobre el objeto “a” al realizar esta operación ya no ocurren más llamados.
Para finalizar este tutorial veamos la salida de nuestro código en la consola Javascript de Google Chrome:
