Aperçu conceptuel

Knockout.js utilise un modèle de conception Model-View-ViewModel (MVVM), qui est une variante du modèle classique Model-View-Controller (MVC). Comme dans le modèle MVC, le modèle est vos données stockées, et le vue est la représentation visuelle de ces données. Mais, au lieu d’un contrôleur, Knockout.js utilise un ViewModel comme intermédiaire entre le modèle et la vue.

ViewModel est une représentation JavaScript des données du modèle, ainsi que des fonctions associées permettant de manipuler les données. Knockout.js crée une connexion directe entre ViewModel et la vue, ce qui permet de détecter les modifications apportées aux données sous-jacentes et de mettre à jour automatiquement les aspects pertinents de l'interface utilisateur..

Figure 5: Le modèle de conception Model-View-ViewModel

Les composants MVVM de notre exemple de panier d'achat sont répertoriés comme suit:

• Modèle: Le contenu du panier d'achat d'un utilisateur stocké dans une base de données, un cookie ou un autre stockage persistant. Knockout.js ne s’intéresse pas à la façon dont vos données sont stockées. C’est à vous de communiquer entre votre modèle de stockage et Knockout.js. En règle générale, vous enregistrez et chargez les données de votre modèle via un appel AJAX..
• Vue: La page du panier HTML / CSS affichée à l'utilisateur. Une fois la vue connectée au ViewModel, les éléments nouveaux, supprimés et mis à jour s'affichent automatiquement lorsque le ViewModel change..
• ViewModel: Objet purement JavaScript représentant le panier d'achat, comprenant une liste d'articles et des méthodes d'enregistrement / de chargement permettant d'interagir avec le modèle. Après avoir connecté votre vue HTML avec ViewModel, votre application n'a plus qu'à se soucier de la manipulation de cet objet (Knockout.js se chargera de la vue)..

---

Observables

Knockout.js utilise observables suivre les propriétés d'un ViewModel. Conceptuellement, les observables agissent comme des variables JavaScript normales, mais elles laissent Knockout.js observer leurs modifications et mettre à jour automatiquement les parties pertinentes de la vue.

Figure 6: Utilisation d'observables pour exposer les propriétés ViewModel

---

Fixations

Observables seulement exposer les propriétés d'un ViewModel. Pour connecter un composant d’interface utilisateur dans la vue à une observable particulière, vous devez: lier un élément HTML à elle. Après avoir lié un élément à un observable, Knockout.js est prêt à afficher automatiquement les modifications apportées au ViewModel..

Figure 7: Liaison d'un composant d'interface utilisateur à une propriété observable

Knockout.js inclut plusieurs liaisons intégrées qui déterminent la manière dont l'observable apparaît dans l'interface utilisateur. Le type de liaison le plus courant consiste simplement à afficher la valeur de la propriété observée, mais il est également possible de modifier son apparence dans certaines conditions ou d'appeler une méthode du ViewModel lorsque l'utilisateur clique sur l'élément. Tous ces cas d'utilisation seront abordés au cours des prochaines leçons.

---

Résumé

Le modèle de conception Model-View-ViewModel, les observables et les liaisons constituent la base de la bibliothèque Knockout.js. Une fois que vous avez compris ces concepts, apprendre Knockout.js consiste simplement à comprendre comment accéder aux observables et les manipuler via les différentes liaisons intégrées. Dans la prochaine leçon, nous aborderons pour la première fois de manière concrète ces concepts en créant une application simple «Hello, World!»..

Cette leçon représente un chapitre de Knockout Succinctly, un eBook gratuit de l'équipe de Syncfusion.