Render: aggiornare la pagina dai dati

In parole semplici

Render significa “mostra i dati nella pagina”. Invece di modificare la pagina in tanti punti diversi, puoi creare una funzione render da richiamare dopo ogni cambiamento.

Questa lezione fa parte del modulo Organizzare una piccola app. L’obiettivo del modulo è: Passare da esempi isolati a un progetto con file, dati e funzioni organizzati.

Parole nuove

• render: funzione che aggiorna la pagina partendo dai dati.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una notes app semplice con file separati e salvataggio locale.

Esempio da copiare

function render(note) {
  lista.innerHTML = "";

  for (const nota of note) {
    const elemento = document.createElement("li");
    elemento.textContent = nota.titolo;
    lista.append(elemento);
  }
}

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizi

Base · facile

Scrivi una funzione render(note) che svuota la <ul> e ricrea un <li> per ogni nota.

function render(note) {
  lista.innerHTML = "";
  for (const nota of note) {
    const li = document.createElement("li");
    li.textContent = nota.titolo;
    lista.append(li);
  }
}

Intermedio · medio

Richiama render dopo ogni modifica (aggiunta di una nota) e verifica che la pagina rispecchi sempre l’array. Aggiungi un messaggio «Nessuna nota» quando la lista è vuota.

Sfida · difficile

Spiega perché conviene avere una sola funzione render richiamata dopo ogni cambiamento invece di modificare il DOM in tanti punti. Discuti il costo di ricostruire l’intera lista e quando, per liste grandi, servirebbero aggiornamenti più mirati.

Controllo finale

Hai finito quando la pagina si aggiorna richiamando una sola funzione.