El HTML como tal no tiene una forma de expresar lógica, como podría ser los condicionales y bucles. Svelte lo hace.
Para renderizar condicionalmente algún marcado, lo envolvemos en un bloque if:
<script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{/if}
{#if !user.loggedIn}
<button on:click={toggle}>
Log in
</button>
{/if}
Esto funciona, pero no es lo más limpio de ver. Para eso tenemos el else
que veremos a continuación.
Dado que las dos condiciones (si user.loggedIn
y si !user.loggedIn
), ambas son excluyentes, podemos simplificar un poco este componente usando un bloque else
:
<script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{:else}
<button on:click={toggle}>
Log in
</button>
{/if}
Un carácter # (
#if
por ejemplo) indica siempre una etiqueta de apertura de bloque. Un carácter / (/if
por ejemplo) indica siempre una etiqueta de cierre de bloque. Los dos puntos (:){:else}
, indica una etiqueta de continuación de bloque.
Y como en otros muchos lenguajes de programación, se puede concatenar varios bloques {:else if}
, por ejemplo:
<script>
let x = 7;
</script>
{#if x > 10}
<p>{x} es mayor que 10</p>
{:else if 5 > x}
<p>{x} es menor que 5</p>
{:else}
<p>{x} está entre 5 y 10</p>
{/if}
El resultado sería en este caso:
7 está entre 5 y 10
Para hacer bucles en Svelte tenemos {:each}. Muy sencillo:
<script>
let perros = [
{ id: 123, name: 'Max' },
{ id: 456, name: 'Leo' },
{ id: 789, name: 'Nina' }
];
</script>
<ul>
{#each perros as perro}
<li>
{perro.name}
</li>
{/each}
</ul>
Lo que nos imprimiría una lista de mis perros 🐶:
<ul>
<li>Max</li>
<li>Leo</li>
<li>Nina</li>
</ul>
Si necesitas el index
del bucle, puedes obtenerlo de la siguiente forma:
<script>
let perros = [
{ id: 123, name: 'Max' },
{ id: 456, name: 'Leo' },
{ id: 789, name: 'Nina' }
];
</script>
<ul>
{#each perros as perro, indice}
<li>
{indice + 1}: {perro.name}
</li>
{/each}
</ul>
Lo que nos imprimiría una lista numerada de mis perros 🐶:
<ul>
<li>1. Max</li>
<li>2. Leo</li>
<li>3. Nina</li>
</ul>
La mayoría de las aplicaciones web tienen que lidiar con datos asincrónicos en algún momento. Svelte hace que sea fácil esperar el valor de directamente en su marcado:
{#await promise}
<p>...esperando</p>
{:then number}
<p>El número es {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
Y esto es todo. Espero que te pueda servir 🙃