Ce este pattern-ul arhitectural MVVM?

Model-View-ViewModel (MVVM) pattern împarte aplicația în trei părți principale:

• Model: Reprezintă datele și logica de afaceri. Nu depinde de interfața cu utilizatorul.
• View: Este stratul de interfață cu utilizatorul. Afișează datele din ViewModel și trimite acțiunile utilizatorului către ViewModel. View nu conține logică de procesare a datelor.
• ViewModel: Este legătura între View și Model. Oferă date din Model într-un format convenabil pentru View și procesează acțiunile utilizatorului, actualizând Model-ul. ViewModel conține logica de prezentare a datelor și de procesare a intrărilor utilizatorului.

Legăturile între componente sunt de obicei realizate prin legături de date. View observă modificările din ViewModel și se actualizează automat, iar ViewModel poate reacționa la evenimentele din View.

// Exemplu de ViewModel (JavaScript condiționat)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Oferă date pentru View
    this.newTodoText = ''; // Stare pentru câmpul de intrare din View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Golește câmpul după adăugare
    }
  }

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