Svelte: Costrutti condizionali e Cicli (Lez. 3)

In questa lezione ci concentreremo sull’uso di costrutti condizionali e dell’Each statement , che ci consente di gestire cicli e ripetizioni all’interno delle nostre applicazioni web. Nello specfico:

• Costrutti condizionali (If)
• Utilizzo di else if
• Applicare stili condizionali
• Reattività con le variabili
• Each Statement, sintassi di base
• Gestire Dati Complessi: Array di Oggetti
• Utilizzo delle Keys nell’Each Statement
• Mescolare i Nomi: Libreria Lodash
• Vantaggi delle Chiavi in Situazioni Dinamiche

Costrutti condizionali (If)

Svelte permette di usare blocchi condizionali if direttamente nel markup HTML. Per avviare un blocco if, si utilizza #if seguito dalla condizione, e per chiuderlo si utilizza /if. Per aggiungere condizioni alternative, possiamo usare {:else}.

Esempio di base: determinare se un utente è maggiorenne o minorenne.

<script>
  //Lezione 3 - App 1 
  let age = 10; // Variabile che rappresenta l'età
</script>

<main>
{#if age >= 18}
  <h2>Sei maggiorenne</h2>
{:else}
  <h2>Sei minorenne</h2>
{/if}
</main>

In questo esempio, se age è maggiore o uguale a 18, visualizzeremo il messaggio “Sei maggiorenne”, altrimenti “Sei minorenne”.

Utilizzo di else if

Con Svelte, possiamo gestire più condizioni utilizzando {:else if}. Un esempio potrebbe essere la verifica se un numero è positivo, negativo o pari a zero.

<script>
  let number = 0;
</script>

<main>
{#if number > 0}
  <h2>Il numero è positivo</h2>
{:else if number < 0}
  <h2>Il numero è negativo</h2>
{:else}
  <h2>Il numero è pari a 0</h2>
{/if}
</main>

Applicare stili condizionali

Possiamo anche applicare classi CSS condizionali in base alla logica dei nostri blocchi if. Ad esempio, cambiamo il colore del testo a seconda che un utente sia maggiorenne o minorenne.

<script>
    let age = 18;
    let color = age >= 18 ? 'green' : 'red';
</script>

<main>
<h2 class={color}>
    {#if age >= 18}
        Utente maggiorenne
    {:else}
        Utente minorenne
    {/if}
</h2>
</main>

<style>
 .red { color: red; }
 .green { color: green; }
</style>

In questo caso, age viene utilizzato per determinare se la classe CSS sarà “green” o “red”.

Reattività con le variabili

In Svelte, possiamo rendere una variabile “reattiva” utilizzando il simbolo $:. Questo significa che la variabile aggiornerà automaticamente il suo valore ogni volta che una delle variabili da cui dipende cambia. La reattività è un aspetto cruciale per rendere dinamiche le interfacce utente.

<script>
  let age = 10;
  let color;

  $: color = age >= 18 ? 'green' : 'red';
</script>

<main>
  <h2 class={color}>
    {#if age >= 18}
      Utente maggiorenne
    {:else}
      Utente minorenne
    {/if}
  </h2>
</main>

In questo caso, ogni volta che age cambia, il valore di color sarà automaticamente aggiornato e, di conseguenza, il colore del testo cambierà. Questo meccanismo consente di semplificare la gestione degli aggiornamenti dinamici senza dover scrivere codice complesso.

Costrutto Each intassi di base

Il costrutto each permette di iterare su array o liste di dati, creando dinamicamente gli elementi corrispondenti nel DOM.

<script>
  const nazioni = ['Italia', 'Francia', 'USA'];
</script>

<main>
  {#each nazioni as nazione}
    <h2>{nazione}</h2>
  {/each}
</main>

In questo esempio, ogni voce dell’array nazioni viene iterata e visualizzata come un elemento <h2>. Questo è un modo efficiente per gestire liste di elementi dinamici senza dover scrivere manualmente ogni elemento nel codice HTML.

Gestire Dati Complessi: Array di Oggetti

Se lavoriamo con dati più complessi, come array di oggetti, possiamo accedere alle proprietà di ogni oggetto all’interno del blocco each.

<script>
    const capitali = [
        { nome: 'Roma', nazione: 'Italia' },
        { nome: 'Parigi', nazione: 'Francia' },
        { nome: 'New York', nazione: 'USA' }
    ];
</script>

{#each capitali as capitale}
    <p>{capitale.nome}, {capitale.nazione}</p>
{/each}

In questo esempio, utilizziamo la “dot notation” per accedere alle proprietà di ciascun oggetto all’interno dell’array capitali. Inoltre, aggiungiamo un indice index per numerare automaticamente ogni elemento.

Utilizzo delle Keys nell’Each Statement

L’uso delle chiavi (key) è fondamentale per garantire che Svelte gestisca correttamente le modifiche in una lista di elementi dinamici, soprattutto quando gli elementi vengono rimescolati, aggiunti o eliminati. Senza una chiave univoca, Svelte potrebbe riutilizzare o rimuovere elementi in modo inefficiente.

In un ciclo each, se non si fornisce una chiave, Svelte utilizzerà automaticamente l’indice dell’array come chiave. Tuttavia, questo può causare problemi in situazioni dinamiche, come la riorganizzazione degli elementi. Per risolvere questo, è consigliabile utilizzare una chiave personalizzata.

Ecco un esempio in cui utilizziamo la libreria Lodash per mescolare una lista di nomi:

<script>
  import { shuffle } from 'lodash';

  let calciatori = ['Baggio', 'Maradona', 'Ronaldo'];

  function mescolaCalciatori() {
    calciatori = shuffle(calciatori);
  }
</script>

<main>
  <button on:click={mescolaCalciatori}>Mescola Calciatori</button>

  {#each calciatori as calciatore (calciatore)}
    <p>{calciatore}</p>
  {/each}
</main>

n questo esempio, usiamo il nome di ogni calciatore come chiave. Questo garantisce che, quando i calciatori vengono mescolati, Svelte riesca a mantenere correttamente il collegamento tra i dati e gli elementi visivi.

Mescolare i Nomi: Libreria Lodash

Per dimostrare ulteriormente l’importanza dell’uso delle chiavi, possiamo installare la libreria Lodash e utilizzare la funzione shuffle per mescolare una lista di nomi. Installiamo la libreria eseguendo il seguente comando da terminale:

npm install lodash
npm install --save-dev @types/lodash

Una volta installata la libreria, possiamo importare la funzione shuffle per mescolare i nomi tramite un pulsante.

<script>
  import { shuffle } from 'lodash';

  let calciatori = ['Baggio', 'Maradona', 'Ronaldo'];

  function mescolaCalciatori() {
    calciatori = shuffle(calciatori);
  }
</script>

<main>
  <button on:click={mescolaCalciatori}>Mescola Calciatori</button>

  {#each calciatori as calciatore (calciatore)}
    <p>{calciatore}</p>
  {/each}
</main>

Vantaggi delle Chiavi in Situazioni Dinamiche

L’utilizzo delle chiavi è essenziale anche in altre situazioni dinamiche, come:

• Eliminare elementi dalla lista.
• Aggiungere nuovi elementi.
• Inserire elementi in posizioni specifiche.

Grazie alle chiavi, Svelte può mantenere il corretto collegamento tra i dati e la loro rappresentazione visiva, garantendo che gli elementi vengano aggiornati o riordinati correttamente. In questo modo, possiamo evitare errori nella gestione delle liste dinamiche, come campi di input che rimangono associati ai valori sbagliati dopo un rimescolamento.