Co je to architektonický vzor MVVM?

Vzor MVVM (Model-View-ViewModel) rozděluje aplikaci na tři hlavní části:

• Model: Představuje data a obchodní logiku. Není závislý na uživatelském rozhraní.
• View: Je vrstva uživatelského rozhraní. Zobrazuje data z ViewModelu a odesílá akce uživatele do ViewModelu. View neobsahuje logiku zpracování dat.
• ViewModel: Je spojkou mezi View a Modelem. Poskytuje data z Modelu ve vhodném formátu pro View a zpracovává akce uživatele, aktualizujíc Model. Obsahuje logiku prezentace dat a zpracování uživatelského vstupu.

Spojení mezi komponentami je obvykle realizováno přes datové vazby. View sleduje změny ve ViewModelu a aktualizuje se automaticky, zatímco ViewModel může reagovat na události z View.

// Příklad ViewModelu (podmíněný JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Poskytuje data pro View
    this.newTodoText = ''; // Stav pro vstupní pole ve View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Vyčistí pole po přidání
    }
  }

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