Qu'est-ce que le modèle d'architecture MVVM?

Le modèle MVVM (Model-View-ViewModel) divise l'application en trois parties principales:

• Model : Représente les données et la logique métier. Il ne dépend pas de l'interface utilisateur.
• View : C'est la couche d'interface utilisateur. Elle affiche les données du ViewModel et envoie les actions de l'utilisateur au ViewModel. La View ne contient pas de logique de traitement des données.
• ViewModel : C'est le lien entre la View et le Model. Il fournit les données du Model dans un format adapté à la View et traite les actions de l'utilisateur, en mettant à jour le Model. Le ViewModel contient la logique de présentation et de traitement de l'entrée utilisateur.

Les connexions entre les composants sont généralement réalisées via des liaisons de données. La View observe les changements dans le ViewModel et se met à jour automatiquement, et le ViewModel peut réagir aux événements de la View.

// Exemple de ViewModel (JavaScript conditionnel)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Fournit des données pour la View
    this.newTodoText = ''; // État pour le champ de saisie dans la View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Nettoie le champ après l'ajout
    }
  }

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