Eliminar eventos Backbone.js y cambiar su contexto

  • Por
Más sobre los eventos en el framework Backbone.js, eliminarlos con off(), crearlos para ejecutarse una sola vez con once() y cambiar el contexto de ejecución o valor de la variable this.
Los eventos ya nos han ocupado un par de artículos en el Manual de Backbone.js . Hemos aprendido acerca del concepto de Evento, tal como lo entiende el framework, como nos ayudan a comunicar entre los elementos de la aplicación y también hemos visto una primera aproximación a su implementación en código fuente.

En este texto aprenderás más cosas sobre eventos y a utilizar algunos otros métodos como son "off()", "one()" o a cambiar el contexto de ejecución de un evento dado. La intención es aprender bien cuáles son las posibilidades de los eventos más esenciales para el desarrollo de sitios web con alto contenido en Javascript.

Desactivar eventos con off()

El método off() nos sirve para eliminar un manejador de eventos de un objeto. El mecanismo es muy sencillo.

La primera posibilidad es desactivar un evento, indicando el nombre del evento que queremos "apagar".

objeto.off("segundo_evento")?

Con eso estamos eliminando todas las funciones manejadoras de eventos asociadas al evento "segundo_evento".

Nota: Para no liarnos con nomenclaturas cabe aclarar de nuevo que estos manejadores de eventos son también llamadas funciones callback en la documentación de Backbone.

La otra posibilidad es desenlazar una única función manejadora de eventos en un evento dado. Esto se consigue iniciando el nombre de la función que queres desenlazar, pero claro, para ello tienes que haber asociado el evento previamente con una función no anónima.

Veamos este ejemplo por pasos. Porque primero tenemos que crear la función y luego asociarla como manejadora de eventos.

function manejadora(){
alert("Estoy en la función Manejadora")?
alert("muestro this.nombre: " + this.nombre)
}
objeto.on("segundo_evento", manejadora)?

Ahora podemos eliminar esta función manejadora con off().

objeto.off("segundo_evento", manejadora)?

Ejecutar el evento una única vez con once()

Este método permite asociar una función manejadora de eventos a un objeto, igual que venimos haciendo con on(). La diferencia es que once() solo ejecutará la función una única vez cuando se produzca el evento. Es decir, la segunda y siguientes veces que ese evento se produzca no se ejecutaría la función callback.

Tal como nos comentan en la documentación, es útil cuando queremos decirle a un objeto "la siguiente (y solo la siguiente) vez que pase algo (algo es el evento) haz esto".

Cambiar el ámbito de ejecución de un evento en Backbone.js

Esta funcionalidad es interesante verla con mayor detalle, pues será útil para determinadas situaciones que veremos más adelante. Como sabemos, pues se explicó en el artículo anterior, dentro de una función manejadora de eventos podemos hacer uso de la variable "this", que es una referencia al objeto sobre el que se está ejecutando un método, en este caso un evento.

Bien, pues a la hora de asociar una función manejadora a un evento podemos definir un nuevo contexto para la variable this, no necesariamente el objeto sobre el cual se produjo el evento. Esto lo podemos ver con un ejemplo.

//creo un primer objeto
var fiatUno = {
marca: "Fiat"
}
//extiendo el objeto para que soporte eventos de Backbonejs
_.extend(fiatUno, Backbone.Events)?
//creo un segundo objeto
var seatToledo = {
marca: "Seat"
}
//creo una función
function mostrarMarca(){
alert("La marca del objeto: " + this.marca)?
}
//defino un evento sobre el primer objeto, cambiando el contexto de this
fiatUno.on("mievento", mostraMarca, seatToledo)?
//disparo el evento sobre el primer objeto
fiatUno.trigger("mievento")?

Como se puede observar, al definir el evento con el método "on()" se enviaron 2 parámetros. Los dos primeros ya los conocíamos: el nombre del evento "mievento" y la función manejadora "mostrarMarca". El tercer parámetro es el nuevo contexto de la variable this.

¿Qué ocurrirá? quizás lo hayas adivinado. Si no hubiéramos modificado el contexto de this, nos mostraría la marca del primer objeto "Fiat", pero como se cambió el contexto, pasando el objeto seatToledo como valor de this, la marca que se mostrará será "Seat".

Conclusión

En el próximo artículo del Manual de Backbone.js en DesarrolloWeb.com vamos a dejar de momento los eventos, introduciéndonos en el mundo de los modelos. Podremos hacer ejemplos más interesantes y poco a poco iremos sacándole un poco más de utilidad a todos estos conocimientos.

Sin embargo, cabe decir que nos queda una parte importante de los eventos que es conseguir que unos objetos escuchen los eventos que se produzcan en otros, algo muy útil para poder acompañar desde un objeto los acontecimientos que se están produciendo en otros objetos de la aplicación.

Además, veremos también más adelante que Backbone.js implementa una serie de eventos que se producen de manera predeterminada cuando ocurren determinadas cosas en los objetos de la aplicación.

Todo este conocimiento será conveniente aplazarlo cuando sepamos algo más del framework, como son los modelos o las vistas, lo que nos permitirá crear ejemplos más representativos.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir