Czym jest wzorzec architektoniczny MVVM?

Wzorzec MVVM (Model-View-ViewModel) dzieli aplikację na trzy główne części:

• Model: Reprezentuje dane i logikę biznesową. Nie zależy od interfejsu użytkownika.
• View: To warstwa interfejsu użytkownika. Wyświetla dane z ViewModel i wysyła akcje użytkownika do ViewModel. View nie zawiera logiki przetwarzania danych.
• ViewModel: To połączenie między View a Model. Dostarcza dane z Model w formacie wygodnym dla View i obsługuje akcje użytkownika, aktualizując Model. ViewModel zawiera logikę prezentacji danych i obsługi wejścia użytkownika.

Połączenia między komponentami zwykle realizuje się za pomocą wiązań danych. View obserwuje zmiany w ViewModel i jest automatycznie aktualizowana, a ViewModel może reagować na zdarzenia z View.

// Przykład ViewModel (warunkowy JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Dostarcza dane dla View
    this.newTodoText = ''; // Stan dla pola wejściowego w View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Czyści pole po dodaniu
    }
  }

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