En este fragmento, tenemos una muy simple de una línea que volca la propiedad staticdata.data de la API de Hyrule Compendium devuelta. Aplicamos el filtro |json:2 para mostrarlo en un formato más legible. StaticData admite JSON (entre otros formatos) desde el primer momento, simplemente le proporciona la URL de la API y luego puede comenzar a usar los datos. ¿StaticData es confuso? Pruebe este tutorial sobre la integración de la API de GitHub, o juegue con los ejemplos interactivos en la sección "StaticData" del tutorial de Modulo.js.

Intenta ejecutar ese fragmento. ¿Ves los datos resultantes? Tendremos que recorrer eso con un bucle for.

Creando una galería de imágenes

Ahora que podemos ver que un atributo .data contiene una Matriz de Objetos, recorrámoslo y generemos una galería:

Esto generará muchas etiquetas img, cada una con un src= asignado a las propiedades de "imagen" de los Objetos en el JSON original Array, y el {% para %} etiqueta-plantilla es la sintaxis para duplicar un poco de HTML para cada elemento de la matriz (sin mencionar cada índice, por ejemplo, un número que cuenta desde 0). Para practicar más, el bucle for tiene muchos ejemplos interactivos en la parte 4 del tutorial de Modulo.js.

Creando estado y script

Lo siguiente más importante que debemos hacer es crear una nueva etiqueta Script, que podemos usar para escribir una función JavaScript simple de una línea:

Esta es una técnica básica para la creación de secuencias de comandos mientras se usa Modulo: crear funciones que le permitan modificar el estado usando JavaScript. En este caso, realiza una operación muy sencilla: "Guarda este monstruo para más tarde". Más precisamente, asigna la variable de estado "seleccionada" a la carga útil dada. De esta manera, la variable de estado "seleccionado" se convierte en una especie de "alijo" para cualquier monstruo que se acaba de seleccionar de la API.

Adjuntar el evento de clic

Ahora, agreguemos otra pieza del rompecabezas: adjuntar el evento de clic. Vea abajo:

Esto se hizo con la sintaxis del archivo adjunto del evento (@click:=, en este
caso), y un atributo de carga útil, que nos permite pasar el monstruo que estamos eligiendo al hacer clic en esta imagen. Los eventos y las etiquetas de Script pueden ser temas confusos si eres nuevo en JavaScript (¡e incluso si no lo eres!), así que lee detenidamente los ejemplos en esta página para obtener más ejemplos sobre el uso de componentes de Script y cómo adjuntar eventos.

Adjuntar el evento de clic

Finalmente, rendericemos condicionalmente la información del monstruo cuando se selecciona un monstruo:

{% if state.selected %}
    
{{ state.selected.name|capfirst }}
    

    
{{ state.selected.description }}
{% else %}
    
Welcome to Hyrule Monster Guide!
    
← Select a monster to learn more
{% endif %}

Esto mostrará inicialmente el mensaje de "Bienvenida" (ya que state.selected comienza como nulo). Luego, tan pronto como alguien haga clic en la imagen de un monstruo, la variable state.selected ya no será nula y
en su lugar, el contenido se mostrará formateado con etiquetas h1 y p, con algunos ajustes aplicados (|capfirst pone la primera letra en mayúscula).

- Fragmento incrustable

Combinándolo todo, luego envolvemos todo en una pantalla: cuadrícula para crear el diseño de lado a lado y un desbordamiento: automático al div izquierdo de la barra de desplazamiento. Finalmente, podemos agregar algunos ajustes finales de CSS al segundo div (relleno, margen y gradiente lineal) y obtenemos los siguientes resultados que se pueden incrustar en cualquier lugar:

Espero que hayas disfrutado este tutorial. Si es así, ¡siguenos para ver más como este!