Cargando



Backbone.js - Eventos

En este tutorial vamos a profundizar sobre el sistema de eventos y sus llamados dentro de Backbone.js.


may 18 2014 00:03
Profesional
may 20 2014 10:13
Los eventos son estructuras de control inversas, decimos esto porque normalmente llamamos una función para que haga algo, en el caso de un evento éste llama la función o acción al pasar u ocurrir una situación en particular.

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
Importante
También debemos tener en cuenta que Backbone.Events también está disponible en el objeto Backbone el cual es visible desde cualquier parte de la aplicación, con esto podemos utilizarlo como un bus de eventos de la siguiente forma que veremos en la imagen a continuación:



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.

Asociar Eventos
Ya sabemos cómo funciona el sistema de eventos de una forma bastante básica, sin embargo hay más herramientas que nos permiten tener un control mayor y hasta personalizar nuestros propios detonadores, los eventos en la aplicación, para ello tenemos los métodos, .on() .off() y trigger() que nos dan la posibilidad de realizar la gestión correspondiente.


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.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X