DOM Reactivo: Atributos

En este artículo vamos a seguir ampliando nuestra biblioteca de DOM Reactivo, esta vez, reaccionando a las señales para realizar cambios en atributos de los elementos del DOM.

Preparando el terreno #

La idea principal va a ser tener una imagen en la pantalla y cada X segundos, queremos que cambie a una distinta. Podría ser un fondo dinámico, algún tipo de carrusel de imágenes, etc...

Lo primero que haremos será crear el código html, con un valor por defecto para la ruta de la imagen. Por ejemplo, un sprite del Pokemon Bulbasaur

<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png" />
          

Se vería así:

Perfecto, pero esto no es nada dinámico ni reactivo. Creemos una directiva para gestionar el valor de los atributos.

La directiva atributo #

Tenemos claro que vamos a utilizar la directiva genérica para aprovechar la abstracción que hicimos en la entrega anterior, pero ahora tenemos un problema. Necesitamos dos datos para gestionar: el nombre del atributo que queremos cambiar y la señal que lo va a controlar.

Caben aquí dos opciones: añadir dos atributos data-* o utilizar un separador. Vamos a usar la segunda opción, en este caso el separador dos puntos ( : )

Por lo tanto, si utilizamos la nomenclatura data-attr para el atributo, el resultado sería de la forma: data-attr="atributo:valor" y la directiva quedaría así:

const directivaAtributo = directivaGenerica("attr", (el, ctx, clave) => {
  const [attr, claveCtx] = clave.split(":");

  el.setAttribute(attr, valorContexto(ctx, claveCtx));
});
          

Cambiando la imagen #

Ahora ya podemos cambiar nuestra imagen. Primero, creamos una señal para url y activamos el DOM:

const url = señal("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png");

activarDOM({ url });
          

Cambiamos el html de la imagen:

<img data-attr="src:url" />
          

Y ya podemos cambiar la imagen cada segundo:

setInterval(() => {
  const randomInt = Math.floor(Math.random() * 1000) + 1;

  url(`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${randomInt}.png`)
}, 1000);
          

Y este sería el resultado:

Conclusión #

Con atributos dinámicos se pueden conseguir tanto estos carruseles de imágenes, como interacciones dinámicas con campos de entrada de texto, comportamientos o estilos específicos y muchas más cosas.

En el futuro exploraremos la posibilidad de crear una directiva de listas, que permita renderizar un mismo esqueleto HTML por cada elemento de una lista.

El código completo estará disponible en los retales