Was ist das MVVM-Architekturmuster?

Das MVVM-Muster (Model-View-ViewModel) teilt die Anwendung in drei Hauptteile:

• Model: Repräsentiert Daten und Geschäftslogik. Es ist unabhängig von der Benutzeroberfläche.
• View: Dies ist die Schicht der Benutzeroberfläche. Sie zeigt die Daten des ViewModels an und sendet Benutzeraktionen an das ViewModel. Die View enthält keine Logik zur Datenverarbeitung.
• ViewModel: Es ist die Verbindung zwischen View und Model. Es stellt die Daten aus dem Model in einem für die View geeigneten Format bereit und verarbeitet Benutzeraktionen, indem es das Model aktualisiert. Das ViewModel enthält die Logik zur Präsentation der Daten und zur Verarbeitung der Benutzereingaben.

Verbindungen zwischen Komponenten werden in der Regel durch Datenbindungen realisiert. Die View beobachtet Änderungen im ViewModel und aktualisiert sich automatisch, während das ViewModel auf Ereignisse aus der View reagieren kann.

// Beispiel für ein ViewModel (JavaScript, bedingt)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Stellt Daten für die View bereit
    this.newTodoText = ''; // Zustand für das Eingabefeld in der View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Feld nach Hinzufügen leeren
    }
  }

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