Kas ir MVVM arhitektūras paraugs?

MVVM (Modelis-Skats-ModelisSkats) — tas ir arhitektūras paraugs, kas strukturē kodu, sadalot lietojumprogrammas loģiku trīs savstarpēji saistītos komponentos:

• Modelis: Attēlo datus un biznesa loģiku. Nav atkarīgs no UI.
• Skats: Parāda datus no Modeļa un nosūta lietotāja darbības (piemēram, klikšķus) Modelim. Skats ir pasīvs un nesatur datu apstrādes loģiku.
• ModelaSkats: ir starpnieks starp Modeli un Skatu. Nodrošina datus no Modeļa formātā, kas ir ērts skatīšanai, un apstrādā lietotāja darbības, atjauninot Modeli. Bieži izmanto datu sasaistes mehānismus (data binding), lai automātiski atjauninātu Skatu, mainoties datiem.

Galvenie principi:

• Divvirzienu datu sasaistes: ModeļaSkata izmaiņas automātiski atspoguļojas Skatā un otrādi (izmantojot atbilstošus rīkus).
• Testējamība: ModeļaSkatu ir viegli testēt izolēti, jo tas nav saistīts ar UI.
• Atbildības sadalījums: Skata, datu un biznesa loģikas skaidra sadalīšana atvieglo izstrādi un uzturēšanu.

Bieži tiek izmantots deklaratīva UI lietojumprogrammās, piemēram, Vue.js, React (ar dažādām variācijām), Angular.

Piemērs vienkāršai struktūrai:

// Modelis
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// ModelaSkats
class UserViewModel {
  constructor(user) {
    this.user = user;
    this.displayName = `${user.name} (${user.age})`;
  }

  incrementAge() {
    this.user.age++;
    this.displayName = `${this.user.name} (${this.user.age})`; // atjaunina displayName
  }
}

// Skats (aptuveni, kā tas varētu izskatīties deklaratīvā ietvarā)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Palielināt vecumu</button>
  </div>
</template>

<script>
import { User } from './model';
import { UserViewModel } from './viewModel';

export default {
  data() {
    return {
      userViewModel: new UserViewModel(new User('Ivars', 30))
    };
  }
}
</script>
*/