Какво е архитектурният модел MVVM?

Модел-View-ViewModel (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);
  }
}