MVVM memarlıq nümunəsi nədir?

MVVM (Model-View-ViewModel) nümunəsi tətbiqi üç əsas hissəyə bölür:

• Model: Məlumatları və biznes məntiqini təmsil edir. İstifadəçi interfeysindən asılı deyil.
• View: Bu, istifadəçi interfeysinin qatıdır. O, ViewModel-dən məlumatları göstərir və istifadəçi fəaliyyətlərini ViewModel-ə göndərir. View məlumatların işlənməsi məntiqini ehtiva etmir.
• ViewModel: View və Model arasında əlaqədir. O, Model-dən məlumatları View üçün uyğun formata təqdim edir və istifadəçi fəaliyyətlərini işləyərək Model-i yeniləyir. ViewModel məlumatların təqdimatı və istifadəçi girişlərinin işlənməsi məntiqini ehtiva edir.

Komponentlər arasındakı əlaqələr adətən məlumat bağlaması vasitəsilə həyata keçirilir. View ViewModel-dəki dəyişiklikləri izləyir və avtomatik olaraq yenilənir, ViewModel isə View-dən gələn hadisələrə cavab verə bilər.

// ViewModel nümunəsi (şərti JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // View üçün məlumatlar təqdim edir
    this.newTodoText = ''; // View-də giriş sahəsinin vəziyyəti
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Sahəni əlavə etdikdən sonra təmizləyir
    }
  }

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