Čo je to architektonický vzor MVVM?

Vzor MVVM (Model-View-ViewModel) rozdeľuje aplikáciu na tri hlavné časti:

• Model: Predstavuje údaje a obchodnú logiku. Nie je závislý od používateľského rozhrania.
• View: Je to vrstva používateľského rozhrania. Zobrazuje údaje z ViewModelu a odosiela akcie používateľa do ViewModelu. View neobsahuje logiku spracovania údajov.
• ViewModel: Je spojkou medzi View a Modelom. Poskytuje údaje z Modelu v vhodnom formáte pre View a spracováva akcie používateľa, aktualizujúc Model. ViewModel obsahuje logiku prezentácie údajov a spracovania vstupu používateľa.

Prepojenia medzi komponentami sa zvyčajne realizujú cez dátové väzby. View sleduje zmeny vo ViewModel a aktualizuje sa automaticky, zatiaľ čo ViewModel môže reagovať na udalosti z View.

// Príklad ViewModelu (podmienený JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Poskytuje údaje pre View
    this.newTodoText = ''; // Stav pre vstupné pole vo View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Vyčistí pole po pridaní
    }
  }

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