Kas yra MVVM architektūros modelis?

MVVM (Model-View-ViewModel) šablonas padalija programą į tris pagrindines dalis:

• Modelis: Atstovauja duomenis ir verslo logiką. Jis nepriklauso nuo naudotojo sąsajos.
• Peržiūra: Tai naudotojo sąsajos sluoksnis. Jis rodo duomenis iš ViewModel ir siunčia naudotojo veiksmus į ViewModel. Peržiūra nesudaro duomenų apdorojimo logikos.
• ViewModel: Tai ryšys tarp Peržiūros ir Modelio. Jis teikia duomenis iš Modelio patogiu naudotojo sąsajai formatu ir apdoroja naudotojo veiksmus, atnaujindamas Modelį. ViewModel turi duomenų pateikimo ir naudotojo įvesties apdorojimo logiką.

Paprastai ryšiai tarp komponentų įgyvendinami per duomenų ryšius. Peržiūra stebi pokyčius ViewModel ir automatiškai atnaujina save, o ViewModel gali reaguoti į įvykius iš Peržiūros.

// Pavyzdys ViewModel (sąlyginis JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Teikia duomenis Peržiūrai
    this.newTodoText = ''; // Būsena įvesties laukui Peržiūroje
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Išvalo lauką po pridėjimo
    }
  }

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