Mis on MVVM arhitektuurimuster?

MVVM (Model-View-ViewModel) muster jagab rakenduse kolme põhiosa:

• Model: Esindab andmeid ja äriloogikat. See ei sõltu kasutajaliidesest.
• Vaade: See on kasutajaliidese kiht. Näitab ViewModelist andmeid ja saadab kasutaja tegevused ViewModelile. Vaade ei sisalda andmetöötluslogikat.
• ViewModel: See on ühendus View ja Model vahel. Pakub andmeid Modelist sobivas vormingus vaatele ja töötleb kasutaja tegevusi, uuendades Modelit. ViewModel sisaldab andmete esitamise ja kasutaja sisendi töötlemise logikat.

Komponentide vahelised ühendused realiseeritakse tavaliselt andmelinkide kaudu. Vaade jälgib ViewModeli muudatusi ja uuendatakse automaatselt, samas kui ViewModel võib reageerida vaate sündmustele.

// Näide ViewModelist (kaudne JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Pakub andmeid vaatele
    this.newTodoText = ''; // Seisund sisendväljale vaates
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Tühjendab välja pärast lisamist
    }
  }

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