Binding de eventos

En el artículo anterior aprendimos (entre otras cosas) sobre el binding de propiedades. También decíamos que, cuando un objeto dispara un evento que hace «algo» (lo que sea), no debíamos introducir código JavaScript en el HTML, sino que debía ir en el archivo que lleva la operativa.

Esta es la manera de hacer las cosas al estilo de Angular, y es cómo debemos hacerlo. Para ello, se emplea una técnica conocida como binding de eventos. Verás que es una manera muy sencilla de hacer las cosas, pero te permite tener tu código mucho más organizado, lo que lo hace más escalable y mantenible.

Es cuestión, como siempre, de adoptar buenas prácticas de programación.

EL BINDING DE EVENTOS

Lo que hacemos es, básicamente, muy simple (bueno, sí, ya me conoces; luego se complicará un poquito). Se trata de identificar un evento de un objeto HTML (es decir, de un objeto del DOM) y asignarle una función que se define en el archivo de la operativa. De este modo, en el archivo de renderización (el HTML) no incluimos código JavaScript como tal, sino una llamada al código JavaScript, en el lugar donde debe estar.

Vamos a seguir con el ejemplo del artículo anterior. Empezaremos por modificar el botón en app.component.html, así:

<button class='btn btn-primary' (click)='mostrarAviso()' [disabled]='boton_desactivado'>Botón de ejemplo</button>

Observa lo que hemos hecho. En primer lugar hemos sustituido la detección del evento onClick, que es la sintaxis habitual de HTML, por el nombre del evento encerrado entre paréntesis, llamándolo (click). Esta es la sintaxis de Angular 5 para el binding de eventos. A continuación, le hemos asociado a este evento un nombre de función que le asignamos nosotros, a nuestro criterio. Esa función deberemos definirla en el correspondiente archivo de operativa (en este caso, app.component.ts), con la instrucción o instrucciones JavaScript que deseemos, así:

Observa las líneas resatadas. Como ves, dentro de la clase que se exporta es donde incluimos la función invocada, con su código. Esto hace que el botón funcione del mismo modo que en el ejemplo del código anterior, pero la sintaxis es la definida por Angular 5, que ofrece un mayor desacoplamiento, al colocar la parte visual donde debe estar, y la lógica también en su sitio.

OTRO EJEMPLO

Ahora vamos a ver otro ejemplo, en el que comprobaremos como la parte visual y la lógica pueden interactuar, es decir, no sólo podemos bindear eventos (permíteme la licencia semántica de «españolizar» el término), sino que podemos hacer que la lógica actúe sobre la parte visual, según ocurran dichos eventos. Es decir, que un evento actuará en las dos direcciones: de la parte visual llamará a la lógica, y la lógica modificará «algo» en la parte visual.

Lo que vamos a hacer es que mantendremos el botón azul que dispara un alert a modo de saludo. Sin embargo, por defecto, este botón estará inhabilitado, y su texto será algo así como Este botón no funciona ahora.

Además, tendremos dos botones adicionales: uno verde, para habilitar el botón azul de saludo, y un rojo, para volver a inhabilitarlo. Los textos de los botones, así como su estado (habilitado o inhabilitado) cambiará según se pulsen. Así, al pulsar el verde, se habilitarán el rojo y el azul, inhabilitándose el propio botón verde. Al pulsar el azul, si está habilitado, lanzará el alert de saludo. Al pulsar el rojo, se inhabilitarán este y el azul, y se habilitará el verde. Lo que buscamos, es comprobar la interacción entre los elementos y como el bindeo de eventos se puede programar en la lógica para que modifique la vista. El aspecto inicial de la vista será similar al siguiente:

Vamos por partes. Empecemos con el código de la vista, en app.component.html:

Fíjate en las líneas resaltadas que definen los tres botones. Aparte de la clase que tienen (que les hemos dado clases de Bootstrap, para adecentarlos un poco), todo lo demás se «ve» afectable por la lógica. El evento click está bindeado, para que llame a funciones definidas en la operativa, la propiedad disabled también está bindeada con valores proceden de la operativa y el texto de cada botón es una interpolación de variables que también proceden de la operativa.

Bien, pues ahora veamos la operativa, en app.component.ts:

Aquí ya hay más material al que debemos prestarle atención, y vamos a irlo describiendo.

En primer lugar, observa las líneas de la 11 a la 23. Declaramos los valores iniciales para las variables del estado de los botones, y sus mensajes. Esta parte no es nueva. Es un poco más extensa (con más datos) que lo que habíamos hecho hasta ahora, pero nada más.

La cuestión de las funciones es algo a lo que debemos prestarle un poco de atención. Por ejemplo, observa lo que ocurre cuando se pulsa uno de los dos primeros botones (el verde o el rojo). Si está habilitado, se lanza la función correspondiente. Esta función cambia los estados de los botones (cambiando el valor de la propiedad disabled) así como las cadenas de texto que aparecen interpoladas en la vista como rótulos de los tres botones. Sin embargo, observa que aquí los nombres de las variables van precedidas de this.. Date cuenta de que estamos trabajando dentro de una clase, que se declara en la línea 8. Esto significa que las variables que manejamos, para pasar a la vista, no son, realmente, variables independientes, sino que tienen que ser referenciadas a través de la clase. Es distinto cuando las declaramos inicialmente al principio de la clase, porque, en el momento de generar la vista, se inicializan de forma dinámica. Sin embargo, para modificarlas dentro de un método, es necesario especificar que la variable a la que estamos llamando es la que se ha definido de la clase en la que estamos trabajando. Si no la prefijamos con this. el JavaScript no buscará la variable de clase, sino una variable interna del método con ese nombre. Como tal variable no existe, dará un error de ejecución. Puede que, al principio, te suene un poco rebuscado pero, si estás familiarizado con la programación orientada a objetos (y, a estas alturas, doy por sentado que es así), enseguida vez la necesidad evidente de esta sintaxis.

Por lo demás, no tiene nada de particular. Si analizas el código verás que es extremadamente simple, aunque ilustra perfectamente como estamos construyendo relaciones sólidas entre la lógica y la vista, que es la razón de ser de la interpolación de variables y el binding de propiedades y eventos.

CONCLUYENDO

En este artículo hemos empezado a ver el binding de eventos, y como podemos usar estas técnicas para interactuar con la lógica. Son conceptos fundamentales del trabajo con Angular, por lo que, en posteriores artículos, seguiremos ampliando nuestro conocimiento a este respecto. Espero verte en el siguiente artículo. La aplicación en su estado actual la tienes en este enlace.

   

Deja un comentario