Wat is het MVVM-architectuurpatroon?

Het MVVM-patroon (Model-View-ViewModel) verdeelt de toepassing in drie hoofdonderdelen:

• Model: Vertegenwoordigt gegevens en bedrijfslogica. Het is onafhankelijk van de gebruikersinterface.
• View: Dit is de laag van de gebruikersinterface. Het toont de gegevens van de ViewModel en stuurt gebruikersacties naar de ViewModel. De View bevat geen logica voor gegevensverwerking.
• ViewModel: Het is de schakel tussen View en Model. Het levert gegevens uit het Model in een voor de View geschikt formaat en verwerkt gebruikersacties door het Model bij te werken. Het ViewModel bevat de presentatie- en invoerlogica.

De verbindingen tussen componenten worden meestal gerealiseerd via datakoppelingen. De View observeert veranderingen in de ViewModel en wordt automatisch bijgewerkt, terwijl de ViewModel kan reageren op gebeurtenissen vanuit de View.

// Voorbeeld van een ViewModel (voorwaardelijk JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Levert gegevens voor de View
    this.newTodoText = ''; // Toestand voor het invoerveld in de View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Leegmaken van het veld na toevoegen
    }
  }

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