Binding y Templating en Aurelia

Hello again!!! en este post se mostrará algunas de las principales características del motor de templates de Aurelia que harán nuestro trabajo con la interfaz de usuario mucho más simple de realizar. Todos los templates en Aurelia deben encontrarse entre los tags template, ejm:

<template>
  <require from="./assets/main.css"></require>
  <require from="./resources/elements/bootstrap-input"></require>

  <div>
    <bootstrap-input></bootstrap-input>
  </div>
</template>

Primero, ¿cómo obtenemos una hoja de estilos (css) o un plugin javascript? Para esto es necesario utilizar el tag require de la siguiente manera:

<!-- Para obtener un css -->
<require from="./assets/main.css"></require>

<!-- Para obtener un elemento no es necesario agregar la extensión -->
<require from="../resources/elements/bootstrap-input"></require>

En el primer caso, utilizamos ./ ó ../ para indicar que la ruta es relativa a la vista donde nos encontramos. En caso de no tener ./ ó ../, la ruta es relativa a la raíz de la aplicación. Solo se debe colocar una extensión en caso de que se este importando un elemento que es únicamente HTML o una hoja de estilos.

En caso de tener más de un elemento con el mismo nombre o si se quiere utilizar otro nombre es necesario especificar el atributo as, ejemplo:

<template>
  <require from="./assets/main.css"></require>
  <require from="./resources/elements/bootstrap-input"
          as="otro"></require>

  <div>
    <otro></otro>
  </div>
</template>

Ahora, ¿cómo agregamos texto dinámico en nuestra templeta?, este proceso se conoce como interpolación y es sumamente simple en Aurelia, se utiliza ${algo}.

<div class="row">
  <!-- Imprime la suma de 10 y 15, o sea 25 -->
  <p>${ 10 + 15 }</p>

  <!-- Imprime 50-->
  <p>${ 5 * 10 }</p>

  <!-- Imprime la cadena 'Soy una cadena' -->
  <p>${ 'Soy una cadena' }</p>

  <!-- Imprime el valor de la variable message del ViewModel -->
  <p>${ message }</p>
</div>

Además, es posible hacer referencia a un elemento en el DOM, para esto solamente se necesita agregar el atributo ref al elemento y luego se lo puede referenciar tanto en el ViewModel como en la misma templeta.

Por ejemplo, en el siguiente fragmento de código le damos el nombre campoNombre al input, para luego obtener su valor en el tag <p>.

<div class="col-sm-10">
  <input type="text" id="nombre" name="nombre" ref="campoNombre">
  <p>${campoNombre.value}</p>
</div>

Otra característica importante es que podemos "enlazarnos" (binding) a propiedades de los tags html, por ejemplo, podemos enlazarnos a la propiedad style de la siguiente manera:

    <div class="col-sm-10" style.bind="campoNombre.value">
      <input type="text" id="nombre" name="nombre" ref="campoNombre">
      <p>${campoNombre.value}</p>
    </div>

En este caso, se cambia el estilo del div de acuerdo a lo que se tiene anotado en el input, como se puede ver, se hizo una referencia al input con el nombre campoNombre, y luego se utilizo el valor (value) de este elemento en el div con style.bind. En caso de querer trabajar con Explorer o Edge, es necesario hacer el bind a la propiedad css que es un alias de style.

También se puede hacer un bind al value de un elemento como se ve a continuación, además, como los bindings son two-way por defecto, cambiando el valor de un input se reflejan los cambios en el otro.

    <div class="col-sm-10" style.bind="campoNombre.value">
      <input type="text" id="nombre" name="nombre" ref="campoNombre">
      <p>${campoNombre.value}</p>
      <input type="text" id="nombre1" name="nombre1" value.bind="campoNombre.value">
    </div>

Ejemplo de bind!!!

Además de bind, que es two-way por defecto para los controles de formularios, se puede utilizar one-way (fluye del view-model a la vista), one-time (fluye solamente una vez del view-model a la vista) y two-way.

Tambien es posible enlazarnos a eventos, para esto se utiliza trigger o delegate. La regla de oro es utilizar delegate siempre que sea posible hacerlo. Como ejemplo, se agregará unos eventos al input recientemente creado:

      <input type="text" id="nombre1" name="nombre1"
              focus.trigger="handleEvent($event)"
              keypress.delegate="handleEvent($event)"
              blur.trigger="handleEvent($event)">
      <p>${evento}</p>

Y el manejador simplemente será:

  evento = 'Aún no han ocurrido eventos';

  handleEvent(event) {
    this.evento = event;
    return true;
  }

Bind a eventos

Para los eventos focus y blur es necesario utilizar trigger (ninguno de estos elementos burbujea; en general, como los elementos en html se encuentran uno dentro del otro el burbujeo implica que el evento se va replicando a los padres del elemento en que ocurrió el evento), mientras que para el evento keypress se utilizará delegate (keypress si burbujea), además se esta llamando una función con el parámetro $event que Aurelia establece para enviarnos el evento que se ha realizado. Como comentario extra, en la función handleEvent se debe hacer un return true para que el evento se propague (En general, el término burbujear y propagar se utilizan con el mismo significado)

Al realizar templetas en Aurelia, contamos con algunos atributos de control como:

• if
• show
• repeat.for

Cambiaremos el mismo ejemplo para mostrar el tag p cuando el valor del primer input sea 'mostrar', para esto utilizaremos if.bind, con la verificación de que el valor del input sea igual a mostrar:

<input type="text" id="nombre" name="nombre" ref="campoNombre">
      <p if.bind="campoNombre.value === 'mostrar'">${campoNombre.value}</p>

if-bind en vivo!!!!

Además, vamos a utilizar repeat para mostrar una lista. Existen algunas variables extras en el contexto del repeat que nos ayudan a identificar varias propiedades del elemento que se esta repitiendo, las cuales son:

• $index: con el índice del iterador
• $first: primer elemento
• $last: último elemento
• $even: elementos pares
• $odd: elementos impares

En el ejemplo, creamos una lista en el view model y luego la mostramos en pantalla:

export class App {

  listaDeFrameworks = ['Aurelia', 'EmberJS', 'Angular', 'React', 'Vue', 'Backbone'];
}

<div>
  <ul>
    <li repeat.for="framework of listaDeFrameworks"
        style="${$odd? 'background-color:yellow' : 'background-color: cyan'}">
      ${$index}. ${framework}
      <span if.bind="$first"> - Primer elemento</span>
      <span if.bind="$last"> - Último elemento</span>
    </li>
  </ul>
</div>

Ejemplo de la lista

Y eso es todo por ahora, para obtener el ejemplo desde github:

$ git clone https://github.com/feardarkness/HotelReservationAppFE.git
$ git checkout tags/templating

And thats it, keep coding >_<