Pour synchroniser le modèle avec la vue, les approches les plus communes sont les suivantes :
Les développeurs mettent à jour explicitement la vue. (e.g. : Vanilla JS / JQuery / ...)
user.isDisabled = true;document.querySelector('button').disabled = user.isDisabled;
Avantages | Inconvénients |
Simple et performant pour des cas très basiques. | Couplage fort avec la vue. |
Pas besoin de framework. | Complexité. |
| Risques importants de désynchronisation du modèle avec la vue. |
| Problèmes de performances. |
| Bugs fréquents. |
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);
Avantages | Inconvénients |
Synchronisation du modèle et de la vue. | Complexité et comportement implicite. |
| Problèmes de performances garantis. |
| Risques de boucles infinies. |
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.
<div>{{ user.firstName }}</div>
refresh() {/* No change. */if (lastUserFirstName === user.firstName) {return;}/* Update view. */divElement.textContent = lastUserFirstName = user.firstName;}
Avantages | Inconvénients |
Simplicité. | Gourmand en performance sans optimisations. |
Couplage faible avec la vue. | |
Contrôle total. | |
... mais combien y a-t-il de fonctions refresh, qui les appelle et quand ?