Cómo definir propiedades de los componentes, aplicar data binding en el template y modificar los valores de los atributos del componente para alterar el estado.
Ahora que ya conocemos la estructura básica de un elemento Polymer 2 podemos centrarnos en aprender a trabajar con sus propiedades, que nos permitirán manejar el estado de los componentes.
Los elementos realizados hasta este punto en el Manual de Polymer 2, solo tenían algo de HTML y unos simples estilos. Ahora vamos a darles algo más de sentido gracias a las propiedades, que pueden almacenar valores que podrán variar a lo largo del tiempo. Además, gracias al data binding, podemos conseguir que el componente cambie de estado al cambiar las propiedades, sin invertir más líneas de código.
Declaración de las propiedades
Las propiedades deben declararse en la clase de implementación del componente. Para indicarlas usaremos un getter, de manera parecida a lo que hacíamos al definir la propiedad "is".
Se definen devolviendo un objeto con todas las propiedades que nuestro componente vaya a necesitar. Podemos especificar muchas cosas al declararlas y gracias a ello podrán tener distintos comportamientos que nos facilitarán diversas situaciones. Justamente esta riqueza en la declaración de propiedades es una de las ventajas de usar Polymer, con respecto a lo que nos ofrece el Javascript nativo de Web Components.
class EstadoAnimo extends Polymer.Element {
static get is() {
return 'estado-animo';
}
static get properties() {
return {
animo: {
type: String,
value: 'feliz'
}
}
}
}
customElements.define(EstadoAnimo.is, EstadoAnimo);En este código has visto cómo se define una propiedad de tipo cadena de caracteres y a la cual hemos inicializado con un valor determinado.
Binding del valor de las propiedades al template
Otra de las ventajas de Polymer es que, mediante una simple sintaxis en el template, podemos volcar el valor de una propiedad en la representación del componente.
En nuestro template simplemente usamos dos llaves para volcar el contenido de una propiedad del componente.
<template>
<style>
span {
text-transform: uppercase;
}
</style>
<div>
Hoy me encuentro <span>{{animo}}</span>
</div>
</template>Fíjate que al referirnos a una propiedad simplemente tenemos que indicar su nombre {{animo}} y el contenido de ella se colocará en el propio HTML del componente. Además, si la propiedad cambia en cualquier momento, Polymer se encargará de actualizar el template para representar el nuevo estado, sin que tengamos que intervenir de alguna manera.
Las propiedades se asocian a atributos del mismo nombre en el elemento HTML
Otra de las cosas básicas que debemos saber de las propiedades es que en los componentes se pueden colocar atributos y asignarles desde fuera valores.
El ánimo predeterminado, definido al declarar la propiedad "animo" era "feliz", pero cuando estemos usando este componente podremos asignarle cualquier estado de ánimo que nos venga en gana, o que necesitemos para nuestra aplicación.
<estado-animo animo="sorprendido"></estado-animo>Los atributos definidos fuera viajan dentro del componente y modifican su estado. Pero como además todo esto es en el fondo Javascript nativo, si manipulamos el DOM con Javascript, también se alterará el componente.
Como sabes, puedes cambiar el valor de un atributo a través del método setAttribute() y con ello veremos que el nuevo valor viaja hacia dentro en el componente.
En este pequeño código hemos jugado algo con esta posibilidad y hemos creado un par de botones para manipular desde fuera el estado de las propiedades del componente, asignando nuevos estados de ánimo, que al cambiar alterará la representación del elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test con ánimos</title>
<link rel="import" href="elementos/estado-animo.html">
</head>
<body>
<estado-animo animo="sorprendido" id="displayanimo"></estado-animo>
<button id="botoncontento">Ponerse contento</button>
<button id="botontriste">Ponerse triste</button>
<script>
function ponerContento(){
document.getElementById('displayanimo').setAttribute('animo', 'contento');
}
function ponerTriste(){
document.getElementById('displayanimo').setAttribute('animo', 'triste');
}
document.getElementById('botoncontento').addEventListener('click', ponerContento);
document.getElementById('botontriste').addEventListener('click', ponerTriste);
</script>
</body>
</html>Videotutorial propiedades declaradas Polymer 2
Si lo deseas, puedes aprender algunas de las cosas que hemos explicado en este artículo en el siguiente videotutorial. En el vídeo podrás encontrar una breve explicación de las propiedades declaradas, junto con un ejemplo de declaración de propiedades en un componente. Verás que las propiedades una vez declaradas las podemos usar en el template y aprenderás a inicializar las propiedades, cargando los valores a través de atributos en la etiqueta del componente.
Conclusión
Hemos conocido de manera resumida las propiedades de los elementos de Polymer. Trabajar con ellas es realmente sencillo y nos permiten hacer gran cantidad de cosas realmente útiles.
Como hemos dicho, existen diversos tipos de propiedades, y no solo nos referimos a que tengan un tipo de datos o de otro, sino que posean comportamientos especiales que nos ayuden a resolver determinadas situaciones. Por ejemplo existen las propiedades computadas, que usan una función para resolver su valor, las propiedades capaces de notificar al padre de los cambios, etc. Además existe la posibilidad de observar valores de las propiedades para implementar programación reactiva. Todo esto lo iremos viendo con calma más adelante, en próximos artículos, aunque si vienes de Polymer 1 estamos seguros que te podrás ir haciendo una idea.
En la siguiente entrega del Manual de Polymer 2 podrás encontrar una información muy útil sobre el ciclo de vida de los componentes (del estándar Web Components V1 y los que agrega Polymer 2).
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...