Cuando trabajamos con Svelte, una de las grandes ventajas que encontramos es la capacidad de crear interfaces reactivas que responden automáticamente a los cambios en los datos. Esto nos permite, por ejemplo, controlar cuándo un botón debe estar activo o desactivado según el contenido que el usuario haya introducido. Imaginemos que tenemos un formulario donde pedimos el nombre de una persona y queremos asegurarnos de que no pueda enviar el formulario si el campo está vacío.
En HTML, sabemos que el atributo disabled en un botón sirve para desactivarlo. Lo interesante en Svelte es que podemos hacer que este atributo aparezca o desaparezca dinámicamente según el valor de una variable. Por ejemplo, si tenemos una variable nombre que almacena el texto introducido, podemos condicionar la presencia del atributo disabled en el botón con una expresión JavaScript. Así, si nombre está vacío, el botón estará desactivado; si no, estará activo.
Para lograr esto, podemos escribir algo como:
<button disabled={nombre.length === 0}>Enviar mensaje</button>
Aquí, cuando nombre.length === 0 es verdadero, el atributo disabled se añade al botón, desactivándolo. Si la condición es falsa, Svelte omite el atributo, y el botón queda habilitado. Gracias a la reactividad, cada vez que el usuario escribe o borra texto, esta expresión se reevalúa y el botón cambia su estado automáticamente.
Pero Svelte nos ofrece aún más control con su sintaxis especial para condicionales en el marcado. Podemos usar bloques if para mostrar u ocultar elementos según ciertas condiciones. La sintaxis es peculiar: para abrir un bloque if usamos {#if condición}, y para cerrarlo { /if }. Por ejemplo, si queremos mostrar un mensaje cuando el campo de nombre esté vacío, podemos hacer:
{#if nombre.length === 0}
<p>No me has dicho cómo te llamas.</p>
{/if}
Este párrafo solo se renderizará cuando la condición sea verdadera, es decir, cuando el campo esté vacío. Si el usuario escribe algo, el párrafo desaparece porque el bloque if ya no se cumple.
Además, Svelte permite manejar la alternativa con un bloque else, que se escribe como { :else }. Esto nos permite mostrar un mensaje diferente cuando la condición no se cumple. Por ejemplo, para saludar al usuario cuando haya introducido su nombre, podemos hacer:
{#if nombre.length === 0}
<p>No me has dicho cómo te llamas.</p>
{:else}
<strong>Hola {nombre}</strong>
{/if}
Así, si el campo está vacío, mostramos el mensaje de aviso, y si no, saludamos al usuario con su nombre. La interpolación de variables en Svelte es sencilla y directa, lo que facilita crear interfaces dinámicas y amigables.
Con estas herramientas, podemos controlar no solo la presencia o ausencia de atributos en elementos HTML, sino también qué contenido se muestra en función de los datos que manejamos. Esto hace que nuestros componentes sean mucho más inteligentes y reactivos, mejorando la experiencia del usuario sin complicar demasiado el código.