El ciclo de vida de un componente en Aurelia

Continuando con la serie de posts acerca del framework Aurelia para el lado del cliente, me parece pertinente, antes de pasar a temas más complejos, conocer el ciclo de vida de un componente en Aurelia.

Desde el momento en que una vista comienza a cargar hasta el instante en que la aplicación es visible para el cliente, se llama a una serie de callbacks en un orden determinad, hecho que es importante conocer para aplicar cambios dinamicamente en la pantalla en el momento en que realmente es posible hacerlo. Por ejemplo, si se quiere buscar un elemento con jquery por el id, el elemento debe encontrarse en el DOM actualmente.

Se debe tomar en cuenta que no solamente los componentes pasan por este ciclo de vida, sino también los elementos personalizados (custom elements) e incluso cualquier modelo (view-model) generado, además, no es necesario implementarlos todos, sino solamente los que se necesiten.

Los callbacks y el orden en que se llaman son:

1. constructor (): el contructor, que es el sitio principal donde se obtienen los elementos inyectados.
2. created (vistaPadre, vistaActual): que se llama en cuento se crean la vista (view) y el modelo (view-model), recibe como primer parámetro la vista en la cual se declara el componente.
3. bind (contexto, contextoSobrecargado): que recibe dos parámetros, siendo el primero el más importante, y es el contexto actual al cuál nos enlazaremos.
4. attached(): que se invoca cuando el elemento se liga al DOM, para ponerlo en contexto para los que utilizarón Jquery alguna vez, es el momento en que se llama el método $().ready(). Este es el momento ideal para inicializar los plugins necesarios.
5. dettached(): este método es lanzado cuando el elemento se quitará del DOM. Es el inverso de attached.
6. unbind(): una vez que el elemento se ha quitado del DOM, también debe eliminarse del contexto actual.

Ahora, vamos a probar que esto funcione realmente y que no se las estoy charlando :D

Continuaremos con la base de proyecto anterior.

Solo para recordar, se puede descargar de github:

$ git clone https://github.com/feardarkness/HotelReservationAppFE.git

$ git checkout tags/creando-elemento

Para probar que esto funciona, modificaremos los archivo src/app.js, src/app.html y src/resources/elements/bootstrap-input.js, de la siguiente manera:

Al archivo app.js, donde agregaremos un logger para imprimir un mensaje cuando el callback se haya ejecutado. Llamaremos al logger app-js, esto no es muy distinto de poner un console.log, excepto que es posible mostrar los mensajes dinamicamente cuando lo necesitemos, lo que es muy útil para realizar un debug de la aplicación.

import {bindable, bindingMode, LogManager} from 'aurelia-framework';

export class BootstrapInput {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) texto;

  constructor() {
    this.logger = LogManager.getLogger('app-js');
    this.message = 'Hello World!';
    this.logger.info('CONSTRUCTOR iniciado');
  }

  bind(contexto, contextoSobrecargado) {
    this.logger.info('BIND iniciado');
  }

  attached() {
    this.logger.info('ATTACHED iniciado');
  }

  unbind() {
    this.logger.info('UNBIND iniciado');
  }

  detached() {
    this.logger.info('DETACHED iniciado');
  }
}

El archivo app.html, donde haremos varias cosas, primero agregamos al primer input la opción de realizar el bind del value con un atributo del modelo con la propiedad value.bind="nombres" (o sea que cuando cambie el valor del input esto se reflejara en el modelo en el atributo nombres y viceversa). El input quedará de la siguiente manera:

<input type="text" class="form-control" id="nombres" 
                     placeholder="Nombres" value.bind="nombres">

Además, en el mismo archivo (app.html) agregamos la opción de mostrar u ocultar el elemento bootstrap-input con la propiedad if.bind="nombres ==='mostrar'? true: false". Esta sentencia simplemente indica que si el valor de el atributo nombres en el modelo (app.js) tiene el valor mostrar, el elemento debe mostrarse, de lo contrario el elemento no se muestra.

Nuestro elemento queda de la siguiente manera:

<bootstrap-input texto.bind="message"
         if.bind="nombres ==='mostrar'? true: false"></bootstrap-input>

En aurelia, existe dos maneras de ocultar o mostrar un elemento, una con if.bind que oculta el elemento evitando que se dibuje incluso como html en la página (lo quita por completo del DOM), otra manera es con show.bind, lo que simplemente agrega una clase para evitar que el elemento se vea, aunque el elemento sigue cargado en el html.

Veamos pues cómo funciona:

Prueba de llamada de callbacks del ciclo de vida de un elemento en Aurelia

Se puede observar que el órden en que se llaman los callbacks es constructor - bind - attached - detached - unbind,constructor, bind y attached al crearse el elemento y detached y unbind al momento de eliminarse. Además, si se ve detalladamente los mensajes, se puede ver que el constructor solamente se llama la primera vez, esto es porque Aurelia se encarga de que cada elemento creado sea instanciado una sola vez.

Y eso es todo por ahora, para bajar una versión del proyecto hasta este punto puedes hacer:

$ git clone https://github.com/feardarkness/HotelReservationAppFE.git

$ git checkout tags/lifecycle

Keep coding!!! >_<