Pour synchroniser le modèle avec la vue, les approches les plus communes sont les suivantes :

Approche Impérative Explicite

Les développeurs mettent à jour explicitement la vue. (e.g. : Vanilla JS / JQuery / ...)

user.isDisabled = true;
document.querySelector('button').disabled = user.isDisabled;

Approche Impérative Implicite

Les développeurs couplent la vue avec le modèle afin de mettre à jour cette dernière à chaque changement.

export class Customer {
    
    set firstName(value) {
        this._firstName = value;
        this.notifyFirstNameChange(value);
    }
    
}
​
customer.subscribeToFirstNameChange(firstName => nameElement.textContent = firstName);

Approche Déclarative

Dans ce cas, ni le controller ni le modèle n'ont conscience de la vue.

En revanche, la vue sait quelles propriétés du modèle surveiller pour maintenir la vue à jour.

Code du Template

<div>{{ user.firstName }}</div>

Code Implicite

refresh() {
​
    /* No change. */
    if (lastUserFirstName === user.firstName) {
        return;
    }
    
    /* Update view. */
    divElement.textContent = lastUserFirstName = user.firstName;
    
}

Mais comment ?

... mais combien y a-t-il de fonctions refresh, qui les appelle et quand ?