Mis on MVVM arhitektuurimuster?

MVVM (Model-View-ViewModel) on arhitektuurimuster, mis eraldab kasutajaliidese (View) ja äriloogika (Model) vaheline vahesein, kasutades vahekihti — ViewModel.

Komponent	Kirjeldus	Eesmärk
Model	Esindab andmeid ja ärireegleid.	Pakub andmeid, ei sõltu View-st ja ViewModel-st.
View	Kuvab kasutajaliidest.	Vastutab visualiseerimise ja kasutajaga suhtlemise eest.
ViewModel	Sisaldab vaate loogikat, tõlgendab andmeid Model-ist View-ks.	Seob View ja Model, sisaldab käske ja omadusi View jaoks.

MVVM-s toimub View ja ViewModel vahel andmete sidumine (data binding). View "tellib" muutusi ViewModel-i omadustes ning ViewModel teavitab View-d nende muutustest. Kasutaja tegevus View-ga (näiteks nupu klõps) käivitab käsu ViewModel-is.

Eelised:

• Vastutuse jaotus: selge UI, äriloogika ja vaate loogika eraldatus.
• Testitavus: ViewModel on lihtne iseseisvalt testida.
• Paranenud hooldatavus: muudatused ühes osas mõjutavad vähem teisi.
• Arendus: frontend- ja backend-arendajad saavad töötada paralleelselt.

Andmete sidumise kontseptsiooni pseudokood:

// ViewModel
class CounterViewModel {
  count = 0; // jälgitav omadus

  increment() {
    this.count++; // muudatuste teavitamine
  }
}

// View (lihtsustatud esitus)
<button onclick="viewModel.increment()">+</button>
<span data-bind="textContent: viewModel.count"></span> // sidumine span-i sisu viewModel.count-iga