Mi az az MVVM architektúrális minta?

Az MVVM (Model-View-ViewModel) minta az alkalmazást három fő részre osztja:

• Model: Az adatok és az üzleti logika reprezentációja. Nem függ a felhasználói felülettől.
• View: Ez a felhasználói felület rétege. A ViewModel-ből származó adatokat jeleníti meg, és a felhasználói műveleteket a ViewModel-be továbbítja. A View nem tartalmaz adatfeldolgozó logikát.
• ViewModel: A View és a Model közötti összekötő. A Model-bből származó adatokat a View számára megfelelő formátumban szolgáltatja, és feldolgozza a felhasználói műveleteket, frissítve a Model-t. A ViewModel tartalmazza az adatok megjelenítésének és a felhasználói bemenetek kezelésének logikáját.

A komponensek közötti kapcsolatok általában adatkötelek révén valósulnak meg. A View figyeli a ViewModel-ben bekövetkező változásokat, és automatikusan frissül, míg a ViewModel reagálhat a View eseményeire.

// Példa ViewModel-re (feltételes JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Adatokat szolgáltat a View-hoz
    this.newTodoText = ''; // Állapot a View bemeneti mezőjéhez
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Törli a mezőt az hozzáadás után
    }
  }

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