Šta je MVVM arhitektonski obrazac?

Модел-Вид-ПрегледМодел (MVVM) образац дели апликацију на три главна дела:

• Model: Представља податке и пословну логику. Не зависи од корисничког интерфејса.
• View: Ово је слој корисничког интерфејса. Приказује податке из ViewModel-а и шаље акције корисника у ViewModel. View не садржи логику обраде података.
• ViewModel: То је веза између View и Model. Обезбеђује податке из Model-а у формату погодном за View и обрађује акције корисника, ажурирајући Model. ViewModel садржи логику приказа података и обраде корисничког уноса.

Обично се везе између компоненти реализују преко везивања података. View посматра промене у ViewModel-у и аутоматски се ажурира, а ViewModel може реаговати на догађаје из View.

// Пример ViewModel-а (условни JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Обезбеђује податке за View
    this.newTodoText = ''; // Стање за поље уноса у View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Чисти поље након додавања
    }
  }

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