Share
Cette leçon est conçue pour être une étude de haut niveau des composants principaux de Knockout.js. En implémentant un exemple d'application concrète, nous verrons comment le modèle de vue, la vue, les observables et les liaisons de Knockout interagissent pour créer une interface utilisateur dynamique..
Tout d'abord, nous allons créer une simple page HTML contenant tout notre code, puis définir un objet ViewModel, exposer certaines propriétés et même ajouter une liaison interactive pour pouvoir réagir aux clics de l'utilisateur..
Avant de commencer à écrire du code, téléchargez la dernière copie de Knockout.js à partir de la page de téléchargement de GitHub.com. A ce jour, la version la plus récente est la 2.1.0. Après cela, nous sommes prêts à ajouter la bibliothèque à une page HTML.
Commençons par une page HTML standard. Dans le même dossier que votre bibliothèque Knockout.js, créez un nouveau fichier nommé index.html, puis ajoutez ce qui suit. Assurez-vous de remplacer knockout-2.1.0.js par le nom de fichier de la bibliothèque Knockout.js que vous avez téléchargée..
Exemple de code: item1.htm
Bonjour, Knockout.js
Le panier de Bill
Il s’agit d’une page Web HTML 5 de base contenant la bibliothèque Knockout.js au bas de ; même si, comme tout script externe, vous pouvez l’inclure où vous le souhaitez (dans est l’autre option commune). La feuille de style style.css n'est nécessaire pour aucun des exemples de cette série, mais elle les rendra beaucoup plus faciles pour les yeux. Vous pouvez le trouver à l'annexe A ou le télécharger à l'adresse https://bitbucket.org/syncfusion/knockoutjs_succinctly. Si vous ouvrez la page dans un navigateur Web, vous devriez voir ce qui suit:
Figure 8: page Web de base Comme nous ne travaillons pas encore avec des données persistantes, nous n'avons pas de modèle avec lequel travailler. Au lieu de cela, nous allons passer directement au ViewModel. Jusqu'à la leçon 7: nous n'utilisons qu'un modèle View-ViewModel.
Figure 9: Focus sur la vue et ViewModel pour le moment N'oubliez pas qu'un ViewModel est une représentation JavaScript pure des données de votre modèle. Pour commencer, nous allons simplement utiliser un objet JavaScript natif comme ViewModel. Sous le
Cela crée une “personne” nommée John Smith, et le ko.applyBindings () méthode indique à Knockout.js d'utiliser l'objet comme ViewModel pour la page.
Bien sûr, si vous rechargez la page, le message «Panier de Bill» s'affichera quand même. Pour que Knockout.js mette à jour la vue basée sur ViewModel, nous devons lier un élément HTML à la personViewModel objet.
Knockout.js utilise un spécial liaison de données attribut pour lier des éléments HTML au ViewModel. Remplacer Bill dans le
tag avec un vide élément, comme suit:
Panier d'achat
La valeur de l'attribut data-bind indique à Knockout.js ce qu'il faut afficher dans l'élément. Dans ce cas, le texte La liaison indique à Knockout.js d'afficher la propriété firstName du ViewModel. Maintenant, lorsque vous rechargez la page, Knockout.js remplacera le contenu de la avec personViewModel.firstName. En conséquence, vous devriez voir «Panier John's» dans votre navigateur:
Figure 10: Capture d'écran de notre premier composant de vue liée De même, si vous modifiez l'attribut data-bind en text: lastName, il affichera «Le panier de Smith». Comme vous pouvez le constater, la liaison d'un élément consiste en réalité à définir un modèle HTML pour votre ViewModel..
Nous avons donc un ViewModel qui peut être affiché dans un élément HTML, mais regardez ce qui se passe lorsque nous essayons de changer la propriété. Après avoir appelé ko.applyBindings (), attribuez une nouvelle valeur à personViewModel.firstName:
ko.applyBindings (personViewModel); personViewModel.firstName = "Ryan";
Knockout.js habitude mettre automatiquement à jour la vue, et la page indiquera toujours «Panier de John». C'est parce que nous n'avons pas exposé le Prénom propriété à Knockout.js. Toutes les propriétés que vous souhaitez que Knockout.js suive doivent être observable. Nous pouvons rendre nos propriétés ViewModel observables en modifiant personViewModel comme suit:
Accentsconagua
var personViewModel = firstName: ko.observable ("John"), nom de famille: ko.observable ("Smith"); Au lieu d’assigner directement des valeurs à Prénom et nom de famille, nous utilisons ko.observable () pour ajouter les propriétés au suivi automatique des dépendances de Knockout.js. Lorsque nous modifions la propriété firstName, Knockout.js doit mettre à jour l'élément HTML pour qu'il corresponde à:
ko.applyBindings (personViewModel); personViewModel.firstName ("Ryan"); Vous avez probablement remarqué que les observables sont en réalité des fonctions et non des variables. Pour obtenir la valeur d'un observable, vous l'appelez sans aucun argument et pour définir la valeur, vous transmettez la valeur en tant qu'argument. Ce comportement est résumé comme suit:
obj.firstName () au lieu de obj.firstName obj.firstName ("Mary") au lieu de obj.firstName = "Mary" S'adapter à ces nouveaux accesseurs peut être quelque peu contre-intuitif pour les débutants de Knockout.js. Veillez à ne pas attribuer accidentellement une valeur à une propriété observable avec le = opérateur. Cela écrasera l'observable, ce qui arrêtera automatiquement la mise à jour de la vue dans Knockout.js..
Notre générique personViewModel object et ses propriétés observables fonctionnent parfaitement pour cet exemple simple, mais rappelez-vous que ViewModels peut également définir des méthodes pour interagir avec leurs données. Pour cette raison, les modèles de vue sont souvent définis en tant que classes personnalisées au lieu d'objets JavaScript génériques. Continuons et remplaçons personViewModel par un objet défini par l'utilisateur:
function PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); ; ko.applyBindings (new PersonViewModel ()); C'est la manière canonique de définir un ViewModel et d'activer Knockout.js. Maintenant, nous pouvons ajouter une méthode personnalisée, comme ceci:
function PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); this.checkout = function () alert ("Essayer de vérifier!"); ; ; La combinaison de données et de méthodes dans un seul objet est l’une des caractéristiques déterminantes du modèle MVVM. Il fournit un moyen intuitif d'interagir avec les données. Par exemple, lorsque vous êtes prêt à partir, appelez simplement le check-out() méthode sur le ViewModel. Knockout.js fournit même des liaisons pour le faire directement à partir de la vue.
Notre dernière étape dans cette leçon consistera à ajouter un bouton de paiement pour appeler le check-out() méthode que nous venons de définir. Ceci est une très brève introduction aux liaisons interactives de Knockout.js, mais il fournit certaines fonctionnalités utiles dont nous aurons besoin dans la prochaine leçon. Sous le
tag, ajoutez le bouton suivant:
Au lieu d’une liaison textuelle affichant la valeur d’une propriété, le Cliquez sur binding appelle une méthode lorsque l'utilisateur clique sur l'élément. Dans notre cas, il appelle la méthode checkout () de notre ViewModel, et vous devriez voir un message d'alerte apparaître.
Figure 11: Message d'alerte créé après un clic sur le bouton de paiement La suite complète de reliures interactives de Knockout.js sera traitée dans la leçon 6:.
Cette leçon a présenté les principaux aspects de Knockout.js. Comme nous l'avons vu, la configuration d'une application Web basée sur Knockout.js se fait en trois étapes:
Vous pouvez penser à lier des éléments de vue à des propriétés observables en construisant un modèle HTML pour un objet JavaScript. Une fois le modèle configuré, vous pouvez complètement oublier le code HTML et vous concentrer uniquement sur les données ViewModel situées derrière l'application. C'est tout l'intérêt de Knockout.js.
Dans la prochaine leçon, nous explorerons le véritable pouvoir derrière le suivi automatique des dépendances de Knockout.js en créant des observables qui s'appuient sur d'autres propriétés, ainsi que des tableaux observables pour la gestion de listes de données..
Cette leçon représente un chapitre de Knockout Succinctly, un eBook gratuit de l'équipe de Syncfusion.
