AureliaJS: Creando elementos personalizados (custom elements) con la ayuda de aurelia-cli

Con la consola de Aurelia es posible crear elementos personalizados de una manera muy sencilla, el post mostrará como crear un elemento, como utilizarlo y como pasar información al elemento. El proyecto será realizado con la base ya creada en un post anterior.

Primero modificaremos el archivo src/app.html para agregarle unos campos al formulario y hacerlo un poco más interesante, el archivo quedará así:

<template>
 <require from="./assets/main.css"></require>
 <div class="container">
  <div class="row">
   <div class="col-xs-offset-3 col-sm-offset-3 col-md-offset-3
             col-lg-offset-3 col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h1>${message}</h1>
    <form action="" method="post" role="form">
     <legend>Formulario de registro</legend>

     <div class="form-group row">
      <label for="nombres" class="col-sm-2 control-label">Nombres</label>
      <div class="col-sm-10">
       <input type="text" class="form-control" id="nombres" 
             placeholder="Nombres">
      </div>
     </div>

     <div class="form-group row">
      <label for="apellidos" class="col-sm-2 control-label">Apellidos</label>
      <div class="col-sm-10">
       <input type="text" class="form-control" id="apellidos"
            placeholder="Apellidos">
      </div>
     </div>

     <div class="form-group row">
      <label for="mail" class="col-sm-2 control-label">Correo Electrónico</label>
      <div class="col-sm-10">
       <input type="text" class="form-control" id="mail" placeholder="Mail">
      </div>
     </div>

     <button type="submit" class="btn btn-primary">Registrarme :)</button>
    </form>
   </div>
  </div>
 </div>
</template>

Y así debería verse el formulario:

Formulario con bootstrap

Ahora, intentemos algo nuevo, primero generamos el nuevo elemento, le daremos el nombre bootstrap-input:

$ au generate element
      bootstrap-input

Los nuevos elementos se crean en src/resources/elements, un archivo html y un archivo javascript.
Modificaremos los archivos bootstrap-input.js y bootstrap-input.html para realizar una prueba del enlace de los atributos del modelo con los componentes de la vista.

import {bindable} from 'aurelia-framework';

export class BootstrapInput {
  @bindable texto;
}

<template>
  <div class="form-group">
    <label for="test-input" class="control-label">Texto</label>
    <input type="text" class="form-control" id="test-input"
         value.bind="texto" placeholder="Prueba de cambio de título desde input text">
  </div>
  <div class="row">
    <h2>${texto}</h2>
  </div>
</template>

Para que se comparta el estado del atributo texto entre el modelo y la vista, es necesario enlazarlos (bind), esto se realiza en el input con la propiedad value.bind="texto", de esta manera le decimos a Aurelia que el valor (value) del input se refleje en el atributo texto (los cambios en el atributo texto en el js también se reflejan en el input, esto se conoce comunmente como two way binding).
Además, estamos agregando la sentencia ${texto} dentro de los tags h2, lo le indica a Aurelia que el valor dentro de las llaves debe reemplazarse por el valor del atributo texto en el javascript. en general para mostrar un atributo del js en la vista simplemente usamos ${nombre-atributo}.

Ahora, para importar el elemento personalizado es necesario requerirlo, modificamos el archivo app.html para requerir el elemento y mostrarlo:

<template>
 <require from="./assets/main.css"></require>
 <require from="./resources/elements/bootstrap-input"></require>
 <div class="container">
  <div class="row">
   <bootstrap-input texto.bind="message"></bootstrap-input>
  </div>
  <div class="row">

¿Qué esta pasando aquí? Primero importamos el elemento con require, y luego lo utilizamos llamando al tag bootstrap-input, además le mandamos un parámetro llamado message al elemento, el valor de message será enlazado al atributo texto del elemento bootstrap-input.js.

Se enlaza los campos de la vista principal al elemento

Ahora, escribiendo en el primer input, se puede observar la actualización automática de la pantalla, aunque los cambios se realizan únicamente en el tag h2 del elemento y no así en el título del formulario, aunque ténicamente, todos estos elementos deberían estar enlazados. Esto pasa porque la anotación bindable que se encuentra en el js de nuestro elemento es de un solo sentido por defecto (se envia el valor de la vista principal al elmento, comunmente denominado one way binding), para que se aprecie la modificación de los campos en ambos sentidos (el valor se envia de ida y de vuelta) simplemente modificamos el archivo bootstrap-input.js agregando el modo two-way.

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

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

Ejemplo con gif para más glamour ;p

Ahora, al modificar el input text podemos observar que los cambios se envian tanto al js del elemento, como al js de la vista principal.

Y eso es todo por ahora, para revisar el código del ejempo, clonar e ir al tag creando-elemento.

$ git clone https://github.com/feardarkness/HotelReservationAppFE.git
$ git checkout tags/creando-elemento

Keep coding!!! >_<