Este es uno de los aspectos más sólidos y poderosos de Backbone.js, ya que su sistema de control de eventos nos libera de tener que hacer esto de forma manual, ofreciendo la posibilidad que podamos construir nuestra lógica de una manera más simple.
Sistema de Eventos de Backbone.js
Como mencionamos el sistema de eventos de Backbone.js es muy poderoso, la razón de esto es que el componente principal de Backbone.Events se encuentra mezclado con las clases principales del framework, dando así la posibilidad de incorporar todo esto en nuestras aplicaciones de forma sencilla.
Algunas de las clases en las que tenemos el sistema de eventos incorporado son:
- Backbone.Model
- Backbone.Collection
- Backbone.Router
- Backbone.History
- Backbone.View
El funcionamiento es muy sencillo, simplemente con el objeto Backbone le decimos que va a correr una función anónima cuando ocurra un evento determinado, esto lo logramos con el método .on(), el primer parámetro es el evento y el segundo la función, dentro de la función anónima que ocurre en el callback podemos ejecutar otras cosas en este caso hicimos un log en la consola.
Creando un Evento Personalizado con .trigger()
Esta es quizás una de las herramientas más útiles que tenemos, ya que nos permite controlar nuestros propios eventos, con lo que podemos agregar más complejidad a nuestra lógica y obtener los resultados adecuados y que necesitamos de una forma muy amigable.Veamos el siguiente código:
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');
Simplemente creamos una asociación entre nuestro objeto y la clase Events, con ello podemos heredar todas sus funcionalidades, luego definimos el comportamiento y nuestro evento personalizado ayudándonos con el método .on(), finalmente podemos obtener el resultado del mismo al hacer un llamado personalizado utilizando el método .trigger().
Esto nos da como resultado lo que vemos a continuación en la siguiente imagen, cuando lo ejecutamos en la consola Javascript de Google Chrome:
Como pudimos ver la gestión de eventos en Backbone.js es algo que tiene suma importancia, sin embargo su uso e implementación es bastante simple, lo que nos ayuda a construir mejores aplicaciones con el menor esfuerzo y con una curva de aprendizaje bastante corta.