Eventos Globales de Aplicaciones en Titanium utilizando Backbone.js

Una de las muchas características destacadas del framework MVC Alloy es cómo utiliza Backbone.js para eventos y enlace de datos.

Anteriormente he hablado sobre lo poderoso que es el data-binding de Alloy, pero Backbone también maneja el manejo de eventos en Alloy, permitiendo que los controladores tengan métodos .on y .off, de modo que puedo crear una nueva instancia de controlador, abrirla y pasar eventos de ida y vuelta entre controladores.

Por ejemplo, podría tener un controlador abriendo otro (basado en ventana) de esta manera:

var newController = Alloy.createController("login");

newController.getView().open();

El nuevo controlador abre la vista de ventana y es posible que desee que alguna interacción en esa ventana se recoja en el controlador principal, por lo que si es una vista de inicio de sesión y se ha autenticado correctamente, es posible que desee saber eso en el controlador principal.

Puedo hacer esto usando el método $.trigger:

function doLogin() {
  // código de inicio de sesión aquí
  $.trigger("loggedIn");
}

Y en el controlador principal agrego el siguiente código después de crear el controlador:

newController.on("loggedIn", function() {
  // responder al inicio de sesión aquí
});

En este ejemplo, estamos desencadenando el evento en el controlador de inicio de sesión y lo recoge el controlador principal.

Pero puede llevar esto un poco más lejos y usar Backbone para agregar eventos a nivel de aplicación en todo el código.

Veamos un ejemplo en el que tenemos una aplicación que tiene que limpiar después de un cierre de sesión, y tal vez eso pueda suceder en algunos lugares, debido a que el usuario cierra la sesión explícitamente o un tiempo de espera de sesión, etc.

Esto es muy fácil con eventos de Backbone, primero creemos un ayudante de aplicación para ayudar con la gestión de eventos:

En Alloy.js, agregaré el siguiente código:

Alloy.Globals.events = _.clone(Backbone.Events);

Ahora, tenemos un objeto que responde a los métodos de evento normales de Backbone, por lo que ahora puedo agregar este controlador, quizás en un controlador central (siempre alrededor) como index.js o similar:

Alloy.Globals.events.on("helloworld", function(e) {
  //
});

En cualquier otro lugar de la aplicación, puedo ejecutar el siguiente código:

Alloy.Globals.events.trigger("helloworld");

En este caso, el evento helloworld es disparado y el controlador lo recibe y lo ejecuta. Puedo apagar el evento usando el método .off:

Alloy.Globals.events.off("helloworld");

O, para eliminar todos los eventos en todas partes:

Alloy.Globals.events.off();

¿Por qué es esto útil?

Puedo imaginar algunos escenarios donde esto sería realmente útil, por ejemplo:

Su aplicación necesita actualizar datos en ciertas situaciones o volver a cargar datos desde un servidor. Esto podría ser en una búsqueda en segundo plano, iniciada por el usuario o debido a un cambio de estado en otra parte de la aplicación. Usando Alloy.Globals.events.trigger("refreshData"); en cualquier lugar de la aplicación se podría hacer esto.

Una aplicación puede cerrar la sesión en varios lugares. Puede agotar el tiempo o forzar el cierre de sesión debido a problemas de seguridad, o el usuario puede seleccionar cerrar la sesión. Usando Alloy.Globals.events.trigger("logout"); en cualquier lugar de la aplicación podría ejecutar un único manejador de código que limpie cualquier configuración guardada, elimine datos y envíe al usuario de vuelta a la pantalla de inicio de sesión.

Puede que desee tener un manejador de aplicación central, digamos en index.js o similar, que enrute al usuario a varias pantallas, interfaces, ventanas o áreas de la aplicación. Al acoplar débilmente todos los controladores y vistas (para que puedan ejecutarse de manera independiente y comunicarse a través de eventos), podría iniciarlos desde cualquier lugar (por ejemplo, una pantalla de inicio de sesión o una ventana emergente de entrada de código PIN).

Personalmente, uso eventos de nivel de aplicación como este mucho en mis aplicaciones. Me encanta el hecho de que puedo apagarlos todos con un solo método .off y prefiero tener el código en un solo lugar y que ese "enrutador" maneje a dónde se envía al usuario a continuación.

También me gusta que puedo agregar múltiples eventos en el mismo manejador, por ejemplo:

Alloy.Globals.events.on("update delete add", function(e) {
  // maneja los eventos de actualización, eliminación y adición aquí
});

Otra forma en que he utilizado eventos de aplicación es en módulos CommonJS. Por ejemplo, podría tener un módulo basado en API / REST que desee informar a la aplicación principal si hay un problema de conexión / red (para que pueda mostrar un mensaje). Al agregar eventos de Backbone al módulo, puedo activar un evento nonetwork o timeout. Si la aplicación que aloja agrega el manejador correspondiente, puede recoger el evento usando el método .on y mostrar un mensaje.

Puede leer más sobre Backbone.js en el sitio web oficial y más sobre cómo Alloy utiliza Backbone en la documentación de Alloy.