1. Einführung
Diese Artikelserie hat Bootstrap eingeführt. Weitere Informationen finden Sie in diesem Artikel: "Bootstrap -Einführung Tutorial". Da in jüngsten Projekten das Front-End von ASP.NET MVC + KnockoutJS + Bootstrap hergestellt wird. Also habe ich wieder angefangen, diese Serie zu schreiben. Schauen wir uns heute einen Blick auf das MVVM -Framework des Web -Front -End -Knockoutjs an.
2. Was ist Knockoutjs?
Jeder, der sich mit der Entwicklung von .NET beschäftigt, sollte wissen, dass das MVVM -Framework in WPF integriert ist, daher ist KnockoutJS auch ein MVVM -Framework für die Webentwicklung. Einfach ausgedrückt, die Vorteile von MVVM werden vom Seitenodellcode getrennt, damit Front-End-Projekte besser gewartet werden können.
Als wir Webseiten schrieb, wurden JS -Code und HTML -Code zusammen gemischt und der Code wurde mit einer großen Anzahl von DOM -Objekten gefüllt. Diese Codestruktur ist sehr verwirrend. Mit dem MVVM -Framework können Sie den JS -Code und den HTML -Code teilen, und der Datenbetriebteil ist einfacher. Sie müssen nur an die entsprechenden Tag-Attribute binden, die über die entsprechende Syntax (Datenbindung) angezeigt werden, wodurch die Entwicklungsgeschwindigkeit beschleunigt wird.
Knockoutjs ist ein solches MVVM -Framework. Anstatt seinen Framework anzurufen, sollte es sich um eine Bibliothek der MVVM -Klasse handeln. Da es nicht das MVVM -Framework gibt, handelt es sich um ein relativ "schweres" Konzept, das Merkmale wie Routing enthalten sollte. Es gibt jedoch keine Knockoutjs. Im Vergleich dazu sollte AngularJs als MVVM -Framework bezeichnet werden.
Die von KnockoutJs implementierten Hauptfunktionen sind wie folgt:
Deklarative Bindungen: Verwenden Sie einfache Syntax, um Modelldaten mit DOM -Elementen zu assoziieren. Das heißt
Abhängigkeitsverfolgung: Stellen Sie Beziehungen zwischen Modelldaten zur Transformation und gemeinsamen Daten fest. Zum Beispiel ist der Gesamtpreis eines Produkts die Summe der Preise jedes Produktartikels. Zu diesem Zeitpunkt kann der Gesamtpreis des Produkts und die Produktartikel verwendet werden, um eine Beziehung mithilfe der Abhängigkeitsverfolgungsfunktion herzustellen. Das heißt, es leitet sich aus der Summe der Gesamtpreise jedes Rohstoffgegenstands ab. Diese Beziehung erfolgt durch die berechnete Funktion in KnockoutJs.
Automatische UI -Aktualisierung: Wenn sich Ihr Modellstatus ändert, wird die Benutzeroberfläche automatisch aktualisiert. Dies geschieht durch die beobachtbare Funktion.
Vorlagen: Schreiben Sie schnell komplexe, nestable Benutzeroberflächen für Ihre Modelldaten. Ähnlich wie das Konzept der Vorlagen in WPF.
Als nächstes verwenden wir spezifische Beispiele, um die Verwendung von KnockoutJs schnell zu erfassen.
3. Deklarative Bindung
Lassen Sie uns sehen, wie die Datenbindungssyntax in KnockoutJs verwendet wird, um Modelldaten an DOM-Elemente zu binden.
1. Einwegbindung
<! DocType html> <html> <head> <meta name = "viewPort" content = "width = Geräte-Width"/> <title> Demo1-ein-Way-Bindung </title> <script type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/cockout- <!--one-way binding--> <div> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /> </p> </div> <!-Dieses Skript sollte in die entsprechende JS-Datei im tatsächlichen Projekt platziert werden und dann im HTML über das Skript-Tag-> <!-JS-Code der Geschäftslogikteil ist, der die Geschäftslogik vom HTML-Code, das den Ansichtscode mehr unterscheidet. this.firstname = "tommy"; this.lastName = "li"; } ko.applybindings (new ViewModel ()); </script> </body> </html>
2. Das obige Beispiel vervollständigt nur den Einwegbindungsvorgang. Das heißt, im obigen Beispiel werden Sie feststellen, dass beim Ändern des Wertes im Eingabe -Tag und beim Verlassen des Fokus der obige Wert nicht aktualisiert wird. Tatsächlich wird die automatische Aktualisierungsfunktion in KnockoutJs nicht automatisch hinzugefügt und die entsprechende Funktion muss unterstützt werden. Diese Funktion ist die beobachtbare Funktion. Schauen wir uns das Beispiel der Zwei-Wege-Bindung an:
<! DocType html> <html> <kopf> <meta name = "AnsichtPort" content = "width = Geräte-Width"/> <title> Demo2-bi-Regisseur-Bindung </title> <script type = "text/javaScript" Src = "/Uploads/RS/376/PBCX3E1Z/Knockout-3.4.0.js"> </script> </head> <body> <!-bi-direktaler Bindung-> <div> <p> Vorname: <starker Datenbind = "Text: Erstname"> </strong> </p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <P> Last Name: <starker Data-Bind = Text: LastName "> </strong> </p> <p> Vorname: <Eingabedaten-Bind =" Wert: FirstName "/> </p> <p> Nachname: <Eingabedaten-Bind =" Wert: LastName "/> </p> </div> <script type =" text/javaScript "> Funktion viewModel () {this this.lastName = ko.Observable ("li"); } ko.applybindings (new ViewModel ()); </script> </body> </html>4.. Vertrauen in die Verfolgung
Lassen Sie uns als nächstes sehen, wie die berechnete Funktion in KO verwendet wird, um die Abhängigkeitsverfolgung zu vervollständigen. Der Implementierungscode des spezifischen Beispiels lautet wie folgt:
<! DocType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> dependency-title type = "text/javaScript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-bidirectional Bindung-> <div> <p> Vorname: <strong data-bind = "Text" Text ". LastName "> </strong> </p> <p> Vorname: <Eingabedaten-Bind =" Wert: FirstName "/> </p> <p> Nachname: <Eingabedaten-Bind =" Wert: LastName "/> </p> <p> Vollständiger Name: <Strong Data-Bind =" Text: Fullname "> </p> </p> </p> <becher-ubbind-/paste-ubbind = butth/paste-ubbind. </div> <script type = "text/javaScript"> function ViewModel () {this.firstname = ko.observable ("tommy"); this.lastName = ko.Observable ("li"); // Abhängig von der Verfolgung this.fullname = ko.computed (function () {return this.firstname () + "" + this.lastName ();}, this); // Ändern Sie den Wert von Observable durch Code this.capitalizElastName = function () {this.lastName (this.lastName (). Touppercase ()); }; } ko.applybindings (new ViewModel ()); </script> </body> </html>Schauen wir uns als nächstes ein Beispiel für die Verwendung deklarativer Bindung und Abhängigkeit an, um komplexe Punkte zu verfolgen. Der spezifische Beispielcode lautet wie folgt:
<! DocType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <Title utf-8 "/> <Title> </> <Titels> </> <Titels> </> <Titels> </> <Titels> </> <Titels. src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head><body> <table> <thead> <tr> <td>Name</td> <td>Amount</td> <td>Price</td> </tr> </thead> <tbody data-Bind = "foreach: items"> <tr> <td daten-bind = "text: product Data-Bind = "Klicken: $ root.remove"> entfernen </a> </td> </tbor> </table> <h3> Bestellpreis: <span data-bind = "text: price"> </span> </h3> <button data-bind = "klicken: addComputer"> add-computer </button </button> <script type = "text text". }. // Bestellklassenfunktion order () {var self = this; this.items = ko.observablearray ([neuer Artikel (Produkte [0], 1), neuer Artikel (Produkte [1], 2)]); // Gesamtbestellpreis this.price = ko.computed (function () {var p = 0; für (var i = 0; i <self.Items (). Länge; i ++) {var item = self.Items () [i]; p+= item.Product.price * item.amount ();} return p;}, self); this.remove = function (item) {self.Items.remove (item); }; this.addCcomputer = function () {self.Items.push (neuer Artikel (Produkte [2], 1)); }; } // Werbemittel -Klasse -Funktion Element (Produkt, Menge) {var self = this; this.Product = Produkt; this.amount = ko.OBServable (Betrag); // Gesamtleistungspreis this.subtotal = ko.computed (function () {return self.amount () * self.product.price;}, self); } ko.applybindings (new order ()); </script> </body> </html>V. Vorlage
Nachdem Sie die obigen Beispiele gelesen haben, sollten Sie das Gefühl haben, dass es sehr einfach ist, mit KO (der Abkürzung von KnockoutJs) zu beginnen. Da seine Syntax sehr leicht zu verstehen ist, werfen wir einen Blick auf die Verwendung von Vorlagen in KO.
<! DocType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Demo5-Temply Binding <Stites> <Scrithess type = "text/javaScript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-Vorlagebindung, der Inhalt des Divs ist das Tag im PersonalTemplate-Vorlage->-> <! -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <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: Alter "> </strong> </p> </script> <script type =" text/javaScript "> var ViewModel = {Name: Ko.Observable ('Tommy'), Alter: Ko.Observable (28), makeLateder: function () {this.age (this.age () + 1); }}; Ko.Applybindings (ViewModel); </script> </body> </html> <! DocType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Demo6-temlping Binding <Titals> <Scortsf-8 "/> <titels> Demo6-Title Binding <Titels <Stites> <Stitels <Scorts> <Stites"/> <titels> Demo6-Title Binding <Stites <Stites <Stites <Scorts. type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head> <body> <h2>Participants</h2> Here are the participants: <div data-bind="template: { name: 'persontemplate', foreach: people }"></div> <script type="text/html" id="persontemplate"> <h3 data-bind="text: name"></h3> <p>Age: <span data-bind="text: age"></span></p> </script> <script type="text/javascript"> function MyViewModel() { this.people = [ { name: 'Tommy', Alter: 27}, {Name: 'Frank', Alter: 33}]; } ko.applybindings (new MyViewModel ()); </script> </body> </html>Weitere Informationen zur Verwendung von Vorlagen finden Sie in der offiziellen Dokumentation: http://knockoutjs.com/documentation/template-binding.html. In diesem Artikel wird nur die Verwendung von Vorlagen in 2 aufgeführt.
6. Zusammenfassung
Zu diesem Zeitpunkt ist der Inhalt des schnellen Starts von Knockoutjs vorbei. Wir werden Ihnen im nächsten Artikel weiterhin KO -Inhalte vorstellen. Der Inhalt des nächsten Artikels führt vor, wie KO verwendet wird, um ein aktuelles Projekt zu erstellen. Verpassen Sie es nicht.