MVVM arxitektura naqshasi nima?

MVVM (Model-View-ViewModel) naqshasi dasturiy ta'minotni uchta asosiy qismga bo'ladi:

• Model: Ma'lumotlar va biznes mantiqini ifodalaydi. U foydalanuvchi interfeysidan mustaqil.
• View: Bu foydalanuvchi interfeysining qatlamidir. U ViewModel-dan ma'lumotlarni ko'rsatadi va foydalanuvchi harakatlarini ViewModel-ga yuboradi. View ma'lumotlarni ishlash mantiqini o'z ichiga olmaydi.
• ViewModel: View va Model o'rtasidagi bog'lovchi. U Model-dan ma'lumotlarni View uchun qulay formatda taqdim etadi va foydalanuvchi harakatlarini ishlov berib, Model-ni yangilaydi. ViewModel ma'lumotlarni taqdim etish va foydalanuvchi kirishlarini ishlash mantiqini o'z ichiga oladi.

Komponentlar o'rtasidagi bog'lanishlar odatda ma'lumotlarni bog'lash orqali amalga oshiriladi. View ViewModeldagi o'zgarishlarni kuzatadi va avtomatik ravishda yangilanadi, ViewModel esa View-dan keladigan voqealarga javob berishi mumkin.

// ViewModel misoli (shartli JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // View uchun ma'lumotlarni taqdim etadi
    this.newTodoText = ''; // Viewdagi kirish maydonining holati
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Qo'shgandan so'ng maydonni tozalash
    }
  }

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