Cos'è il pattern architetturale MVVM?

Il pattern MVVM (Model-View-ViewModel) divide l'applicazione in tre parti principali:

• Model: Rappresenta i dati e la logica di business. È indipendente dall'interfaccia utente.
• View: È lo strato dell'interfaccia utente. Mostra i dati del ViewModel e invia le azioni dell'utente al ViewModel. La View non contiene logica di elaborazione dei dati.
• ViewModel: È il collegamento tra View e Model. Fornisce i dati dal Model in un formato comodo per la View e gestisce le azioni dell'utente, aggiornando il Model. Il ViewModel contiene la logica di presentazione e di gestione dell'input utente.

Le connessioni tra i componenti sono generalmente implementate tramite binding dei dati. La View osserva le modifiche nel ViewModel e si aggiorna automaticamente, e il ViewModel può reagire agli eventi della View.

// Esempio di ViewModel (JavaScript condizionale)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Fornisce dati per la View
    this.newTodoText = ''; // Stato per il campo di input nella View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Pulisce il campo dopo l'aggiunta
    }
  }

  removeTodo(index) {
    this.model.removeTodo(index);
  }
}