MVVM mimari deseni nedir?

MVVM (Model-View-ViewModel) deseni, uygulamayı üç ana bölüme ayırır:

• Model: Verileri ve iş mantığını temsil eder. Kullanıcı arayüzüne bağlı değildir.
• View: Kullanıcı arayüzü katmanıdır. ViewModel'den verileri gösterir ve kullanıcı eylemlerini ViewModel'e iletir. View, veri işleme mantığı içermez.
• ViewModel: View ile Model arasında bağdır. Model'den verileri View için uygun biçimde sağlar ve kullanıcı eylemlerini işler, Model'i günceller. ViewModel, veri sunumu ve kullanıcı girişlerinin işlenmesi mantığını içerir.

Bileşenler arasındaki bağlantılar genellikle veri bağlama yoluyla gerçekleştirilir. View, ViewModel'deki değişiklikleri izler ve otomatik olarak güncellenir, ViewModel ise View'den gelen olaylara tepki verebilir.

// Örnek ViewModel (koşullu JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // View için veri sağlar
    this.newTodoText = ''; // View'deki giriş alanı durumu
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Eklemeden sonra alanı temizle
    }
  }

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