Hablemos sobre alpinejs

Alpine 2, la versión con la que está escrito este ejemplo, ofrecía 14 directivas y 6 propiedades mágicas que puedes conocer leyendo su documentación en español. La versión actual es Alpine 3, documentada en alpinejs.dev.

Hagamos un pequeño ejemplo para entender mejor qué es alpinejs

Bueno, pongamos manos a la obra y trabajamos en un widget para el clima que se verá más o menos como esto:

template original de iaminos.

Para hacer este proyecto necesitamos conocer sobre:

• template strings
• algunas directivas de alpine:
  • x-data: Declara un nuevo scope del componente.
  • x-init: Ejecuta una expresión cuando un componente se inicializa.
  • x-text: Actualiza el innerText del elemento.
• tener una llave api de open weather map.

Asumiendo que bajaron el template vamos a irlo modificando poco a poco.

En el <head> vamos a incluir esta etiqueta javascript:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>

Ya con esto tendremos alpine inicializado.

Si usas Alpine 3, el script es https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js (con defer, según su guía de instalación) y puedes quitar el x-init="init()" de los ejemplos: Alpine 3 llama solo al método init() del objeto de x-data, así que dejarlo lo ejecutaría dos veces.

Ahora vamos a crear una etiqueta script y vamos a incluir lo siguiente:

function temp() {
    return {
        temp: {},
        init() {
            // todo
        }
    }
}

Ahora lo que debemos hacer es declarar el scope e inicializarlo de la siguiente forma:

<div x-data="temp()" x-init="init()">
    <!-- todo -->
</div>

NOTA: voy a remover todas las clases CSS y dejar las directivas de alpine

Aquí lo que indicamos es que el scope de este componente será la función temp() y que solo estará disponible para todo aquello que esté dentro de las etiquetas div donde fue declarado.

Teniendo en cuenta esto pasemos a terminar de armar nuestro widget.

<div x-data="temp()" x-init="init()">
    <div x-text="`${temp.name}`">n/a</div>
    <div>
        <img :src="`https://openweathermap.org/img/w/${temp.weather[0].icon}.png`" alt=""/>
    </div>
    <div>
        <div x-text="`${parseInt(temp.main.temp)}°C`">n/a</div>
        <div>
            <div x-text="`${temp.weather[0].main}`">n/a</div>
            <div>
                <span>↑</span>
                <span x-text="`${parseInt(temp.main.temp_max)}°C (max)`">n/a</span>
            </div>
            <div>
                <span>↓</span>
                <span x-text="`${parseInt(temp.main.temp_min)}°C (min)`">n/a</span>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>Wind</div>
            <div x-text="`${temp.wind.speed}k/h`">n/a</div>
        </div>
        <div>
            <div>Humidity</div>
            <div x-text="`${temp.main.humidity}%`">n/a</div>
        </div>
        <div>
            <div>Feels like</div>
            <div x-text="`${parseInt(temp.main.feels_like)}°C`">n/a</div>
        </div>
    </div>
</div>

Y nuestra función javascript pasaría a quedar de esta forma:

function temp() {
    return {
        temp: {},
        init() {
            fetch('https://api.openweathermap.org/data/2.5/weather?q=Montevideo,UY&appid=<API_KEY>&units=metric')
                .then(response => response.json())
                .then(response => { this.temp = response })
        }
    }
}

Si no tienes ganas de codear y solo quieres mirar pasa por aquí, solo vas a necesitar tu clave api y listo.