1. Introduction
Cette série d'articles a introduit Bootstrap. Pour plus de détails, veuillez consulter cet article: "Bootstrap Introduction Tutoriel". Étant donné que dans les projets récents, le front-end est réalisé par ASP.NET MVC + KnockoutJS + Bootstrap. J'ai donc recommencé à écrire cette série. Aujourd'hui, jetons un coup d'œil au cadre MVVM du Web frontal - knockoutjs.
2. Qu'est-ce que Knockoutjs?
Quiconque est engagé dans le développement .NET doit savoir que le cadre MVVM est intégré dans WPF, donc KnockoutJS est également un cadre MVVM pour le développement Web. Pour le dire simplement, les avantages de MVVM sont séparés du code d'affichage de la page, afin que les projets frontaux puissent être mieux entretenus.
Avant, lorsque nous avons écrit des pages Web, le code JS et le code HTML ont été mélangés et le code a été rempli d'un grand nombre d'objets DOM. Cette structure de code est très déroutante. Avec le framework MVVM, vous pouvez diviser le code JS et le code HTML, et la pièce de fonctionnement des données est plus simple. Il vous suffit de vous lier aux attributs de balise correspondants pour afficher à travers la syntaxe correspondante (données de données), accélérant ainsi la vitesse de développement.
Knockoutjs est un tel framework MVVM. En fait, au lieu d'appeler son cadre, il devrait être une bibliothèque de classe MVVM. Parce qu'il n'a pas le cadre MVVM, c'est un concept relativement "lourd", qui devrait inclure des fonctionnalités telles que le routage. Cependant, il n'y a pas de knockoutjs. En comparaison, AngularJS doit être appelé un cadre MVVM plus approprié.
Les fonctions principales implémentées par knockoutjs sont les suivantes:
Beau déclaratifs: utilisez une syntaxe simple pour associer les données du modèle aux éléments DOM. C'est-à-dire la syntaxe "Data-Bind"
Suivi des dépendances: établir des relations entre les données du modèle pour la transformation et les données conjointes. Par exemple, le prix total d'un produit est la somme des prix de chaque élément de produit. À l'heure actuelle, le prix total du produit et des articles du produit peuvent être utilisés pour établir une relation en utilisant la fonction de suivi de dépendance. Autrement dit, il est dérivé de la somme des prix totaux de chaque article de produit. Cette relation est effectuée par la fonction calculée dans KnockoutJS.
Rafraîchissement automatique de l'interface utilisateur: Lorsque votre modèle état change, l'interface d'interface utilisateur sera automatiquement mise à jour. Cela se fait par la fonction observable.
Templage: Écrivez rapidement des UIS nistables complexes pour vos données de modèle. Semblable au concept de modèles dans WPF.
Ensuite, nous utilisons des exemples spécifiques pour saisir rapidement l'utilisation de knockoutjs.
3. Liaison déclarative
Voyons comment utiliser la syntaxe de données de données dans les knockoutjs pour lier les données du modèle aux éléments DOM.
1. Besure à sens unique
<! Doctype html> <html> <éadf> <meta name = "Viewport" contenu = "width = device-width" /> <title> DEMO1-one-way binding </ title> <script type = "text / javascript" src = "/ uploads / rs / 376 / pbcx3e1z / knockout-3.4.0.js"> </prip>> <eadbody> <! - Bondage unidirectionnel -> <div> <p> Prénom: <Strong Data-Bind = "Text: FirstName"> </strong> </p> <p> Nom: <Strong Data-Bind = "Text: LastName"> </strong> </p> <p> Premier nom: <Entrée Data-Bind = "Value: FirstName" /> </p> <p> Dernier nom: <fort-bind = "Value: LastName" /> </p> </div> <! - Ce script doit être placé dans le fichier JS correspondant dans le projet réel, puis référencé dans le HTML via la balise de script -> <! - JS Code est la partie de la logique métier, qui sépare la logique métier de la vue ultérieure -> <script type = "Text =" Text / Javascript " this.firstname = "tommy"; this.lastName = "li"; } ko.applybindings (new ViewModel ()); </cript> </ body> </html>
2. L'exemple ci-dessus termine uniquement l'opération de liaison unidirectionnelle. Autrement dit, dans l'exemple ci-dessus, vous constaterez que lors de la modification de la valeur dans la balise d'entrée et de la mise au point, la valeur ci-dessus ne sera pas mise à jour. En fait, la fonction de mise à jour automatique dans knockoutjs ne sera pas automatiquement ajoutée et la fonction correspondante doit être prise en charge. Cette fonction est la fonction observable. Jetons un coup d'œil à l'exemple de la reliure bidirectionnelle:
<! Doctype html> <html> <éadf> <meta name = "Viewport" contenu = "width = device-width" /> <t titre> Demo2-bi-directional liant </title> <script type = "text / javascript" src = "/ uploads / rs / 376 / pbcx3e1z / knockout-3.4.0.js"> </ script> </ head> <corps <! LASTNAME "> </strong> </p> <p> Prénom: <Input Data-Bind =" Value: FirstName "/> </p> <p> Nom: <Input Data-Bind =" Value: LastName "/> </p> </div> <Script Type =" Text / Javascript "> Fonction ViewModel (); this.lastName = ko.observable ("li"); } ko.applybindings (new ViewModel ()); </cript> </ body> </html>4. Reliance sur le suivi
Ensuite, voyons comment utiliser la fonction calculée dans KO pour terminer le suivi des dépendances. Le code d'implémentation de l'exemple spécifique est le suivant:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-ype" contenu = "text / html; charchet = utf-8" /> <title> Démo3-Depend Suiding </ title> <script> type = "text / javascript" src = "/ uploads / rs / 376 / pbcx3e1z / knockout-3.4.0.js"> </ script> </ head> <body> <! - Bidirectional Binding LASTNAME "> </strong> </p> <p> Prénom: <Input Data-Bind =" Value: FirstName "/> </p> <p> Nom de famille: <Strong Data-Bind =" Value: LastName "/> </p> <p> Nom complet: <Strong Data-Bind =" Text: FullName "> </strong> </p> <bouton Data-Bind =" Click: CapitalSelastname "> LastName vers Uppername to Updto </ div> <script type = "text / javaScript"> fonction ViewModel () {this.firstName = ko.oBservable ("tommy"); this.lastName = ko.observable ("li"); // dépend du suivi this.fullName = ko.computed (function () {return this.firstName () + "" + this.lastName ();}, this); // modifie la valeur de l'observable via le code this.capitalizelastName = function () {this.lastName (this.lastName (). Toupperase ()); }; } ko.applybindings (new ViewModel ()); </cript> </ body> </html>Ensuite, jetons un coup d'œil à un exemple d'utilisation de la liaison déclarative et de la dépendance pour suivre les points complexes. L'exemple de code spécifique est le suivant:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" /> <title> démo4-list binding </ title> src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </ script> </ head> <body> <pable> <thead> <tr> <td> nom </ td> <td> </td> <td> data-bind = "foreach: items"> <tr> <td data-bind = "text: product.name"> </td> <td> <sélectionner data-bind = "Options: [1,2,3,4,5,6], valeur: montant"> </lect> </td> <td data-bind = "text: sous-total"> </td> <td> $ root.remove "> supprimer </a> </td> </ tbor> </ table> <h3> "Xiaomi note", prix: 999}, {nom: "Macro Notebook", prix: 4999}]; // Order class function order () {var self = this; this.items = ko.observableArray ([nouvel article (produits [0], 1), nouvel article (produits [1], 2)]); // Prix de commande total ce.price = ko.computed (function () {var p = 0; for (var i = 0; i <self.items (). La longueur; i ++) {var item = self.items () [i]; p + = item.product.price * item.amount ();} return p;}, self); this.reMove = function (item) {self.items.remove (item); }; this.addComputer = function () {self.items.push (nouvel élément (produits [2], 1)); }; } // Élément de fonction de classe d'élément de ligne (produit, montant) {var self = this; this.product = produit; this.amount = ko.observable (montant); // Prix de l'article de ligne totale this.subTotal = ko.computed (function () {return self.amount () * self.product.price;}, self); } ko.applybindings (new Order ()); </cript> </ body> </html>V. modèle
Après avoir lu les exemples ci-dessus, vous devez réellement sentir qu'il est très facile de commencer avec KO (l'abréviation de KnockoutJS). Parce que sa syntaxe est très facile à comprendre, jetons un coup d'œil à l'utilisation de modèles dans KO.
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; chasset = utf-8" /> <title> demo5-template binding </ title> type = "text / javascript" src = "/ uploads / rs / 376 / pbcx3e1z / knockout-3.4.0.js"> </cript> </ head> <body> <! - Template liant, le contenu de la div est la balise dans le modèle Personmplate -> <! ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <Strong Data-Bind = "Text: Age"> </strong> </p> </div> -> <div data-bind = "template: 'PersonTemplate'"> </ div> <script id = "PersonTemplate" type = "Text / Html"> <p> Name: <Strong Data-Bind = "Text: Name"> </strong> </p> <p> Age: <Strong Data-Bind = "Text: Âge "> </strong> </p> </ script> <script type =" text / javaScript "> var ViewModel = {name: ko.observable ('tommy'), âge: ko.observable (28), makeoLder: function () {this.age (this.age () + 1); }}; KO.ApplyBindings (ViewModel); </cript> </ body> </html> <! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; chasset = utf-8" /> <title> demo6-template binding </ title> type = "text / javascript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.4.0.js"> </ script> </ head> <body> <h2> Particulations </h2> ici les participants: <div data-bind = "TEmplate: {name:" Perstlemplate "pour les acteurs: <Div Data-Bind =" Template: {Name: "Personder" } "> </ div> <script type =" text / html "id =" PersonTemplate "> <h3 data-bind =" text: name "> </h3> <p> Âge: <span data-bind =" text: age "> </span> </p> </ script> <script type =" text / javascrip Âge: 27}, {nom: 'Frank', âge: 33}]; } ko.applybindings (new MyViewModel ()); </cript> </ body> </html>Pour plus d'informations sur l'utilisation des modèles, veuillez vous référer à la documentation officielle: http://knockoutjs.com/documentation/template-binding.html. Cet article répertorie uniquement l'utilisation des modèles en 2.
6. Résumé
À ce stade, le contenu du démarrage rapide de Knockoutjs est terminé. Nous continuerons de vous présenter KO Content dans le prochain article. Le contenu du prochain article présentera comment utiliser KO pour réaliser un projet réel. Ne le manquez pas.