Kas ir MVVM arhitektūras paraugs?

MVVM (Modelis-Skats-Modelis) paraugs sadala lietojumprogrammu trīs galvenajās daļās:

• Modelis: Attēlo datus un biznesa loģiku. Tas nav atkarīgs no lietotāja saskarnes.
• Skats: Tas ir lietotāja saskarnes slānis. Tas parāda datus no ViewModel un nosūta lietotāja darbības uz ViewModel. Skats nesatur datu apstrādes loģiku.
• ViewModel: Tas ir saikne starp Skatu un Modeli. Tas nodrošina datus no Modeļa lietotāja saskarnes formātā un apstrādā lietotāja darbības, atjauninot modeli. ViewModel satur datu prezentācijas un ievades apstrādes loģiku.

Parasti saiknes starp komponentiem tiek īstenotas ar datu saistībām. Skats novēro izmaiņas ViewModel un tiek automātiski atjaunināts, bet ViewModel var reaģēt uz notikumiem no Skata.

// Piemērs ViewModel (nosacīts JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Nodrošina datus skata vajadzībām
    this.newTodoText = ''; // Stāvoklis ievades laukam skata iekšienē
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Notīra lauku pēc pievienošanas
    }
  }

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