Τι είναι το αρχιτεκτονικό μοτίβο MVVM;

Το μοτίβο MVVM (Model-View-ViewModel) διαιρεί την εφαρμογή σε τρία βασικά μέρη:

• 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);
  }
}