Jeder, der Knockoutjs gespielt hat, weiß, dass es eine leistungsstarke Funktion namens Komponente gibt, und eines der großartigen Dinge an dieser Komponente ist, dass er seine eigene ViewModel und Vorlage hat, wie die folgenden:
ko.comPonents.register ('message-editor', {viewModel: function () {}, Vorlage: ""});Offensichtlich ist das ViewModel der Funktionsfunktionsbereich, und die Vorlage ist der Vorlagenbereich, und dann wird die Komponente über die Registerfunktion in Knockout registriert. Lassen Sie uns unten eine einfache Funktion nachweisen, bei der die Länge des aktuellen "Eingangsinhalts" dynamisch angezeigt wird.
<! DocType html> <html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <meta charset = "utf-8"/> <script src = "jquery-1. src = "Knockoutjs.js"> </script> </head> <body> <div daten-bind = 'component: "message-editor"'> </div> <script type = "text/javaScript"> ko.comPonents.register ('message-editor', {viewmodel: function (params) {thistext = kO. '');}, Vorlage: 'Nachricht: <Eingabedaten-bind = "Wert: text"/>'+ '(Länge: <span data-bind = "text: text (). länge"> </span>)'}); ko.applybindings (); </script> </body> </html>Bitte sehen Sie sich diesen Code genauer an. Die aktuelle Komponente injiziert die Vorlagenvorlage in das DIV -Tag des HTML, und es gibt auch eine Bindung des Textelements in diesem Vorlagen -Tag, und die Datenquelle dieses (Text (). Länge) ist dieser. ． Rechts. . . Mit der Integration dieser beiden wird unsere endgültige HTML wie folgt gezeigt:
Als nächstes geben wir einige Zahlen beiläufig ein und bewegen die Maus weg. Zu diesem Zeitpunkt wird das Eingangsänderungsereignis ausgelöst, wie z. B. die folgenden.
Ist es nicht so cool? ? ? Natürlich können einige Leute fragen, was wäre, wenn ich einen kleinen Standardwert gebe, wenn die Eingabe gerendert wird? ? ? Ist das okay? Natürlich ist es auch möglich. Zu diesem Zeitpunkt können wir den Wert standardmäßig in der Datenbindung zuweisen und es ist in Ordnung. . . Zum Beispiel ist Folgendes:
<body> <h4> zweite Instanz, übergebene Parameter </h4> <div daten-bind = 'component: {name: "message-editor", params: {initialText: "Hallo, Welt!" }} '> </div> <script type = "text/javaScript"> kO.comPonents.register (' message-editor ', {viewModel: function (params) {this.text = ko.observable (params && params.initialText ||'); data-bind = "text: text (). länge"> </span>) '}); ko.applybindings (); </script> </body>Sie können sehen, dass ich im obigen Code dem Params-Objekt in der Komponente eine InitialText-Eigenschaft hinzugefügt habe, und zu diesem Zeitpunkt kann ich diesen InitialText dynamisch in unser ViewModel injizieren, und dann abonnieren unsere Eingabe- und Spannelemente diese. Zu diesem Zeitpunkt erfolgt ein Echtzeit-Update-Betrieb. Ich kann es kaum erwarten, einen Blick darauf zu werfen ~
1: Problemanalyse
Okay, durch die obige Demonstration haben Sie möglicherweise die folgenden zwei Probleme gefunden. Das erste Problem ist, dass es so mächtig ist. Solange Sie sich registrieren, müssen Sie kein ViewModel über ApplyBindings anwenden, was die Modularisierung der Seite realisiert, was wirklich bequem ist ~ dieses Problem ist also eine gute Sache. Das zweite Problem ist, dass der Inhalt in unserer Vorlagenvorlage in Form von "hartcodiert" besteht. Wenn es viele dieser Inhalte gibt, z. B. 100 Zeilen und 200 Zeilen, sind wir verrückt? ? ? Egal wie fähig Sie sind, Sie können sie nicht einzeln spleißen. Selbst wenn Sie sie spleißen, sind die Wartungskosten zu hoch. Die Frage ist also, wie der Vorlageninhalt dynamisch dreht. ? ? Zum Beispiel die Seite der Baidu -Bibliothek, die wir in der Realität sehen. . . Wie in der Abbildung unten gezeigt:
Auf dieser Seite gibt es viele Module, wie die oben genannten drei, die ich umkreiste. In diesen drei Modulen muss viel HTML vorhanden sein ~~~
Zwei: Dynamische Vorlageerfassung
In der Regel gibt es zwei Möglichkeiten, HTML -Inhalte dynamisch zu erhalten. Das erste ist Anforderungen. Natürlich müssen Sie auf eine solche JS verweisen. Die zweite besteht darin, ihre Vorlagen neu zu schreiben. Natürlich müssen wir in diesem Artikel die LoadTemplate -Funktion in der Komponente neu schreiben und dann den Defaultloader -Loader ersetzen. Ist es nicht sehr einfach? ? ?
1. Schreiben Sie die LoadTemplate -Methode neu
// Schritt 1: Schreiben Sie die LoadTemplate -Methode um. {ko.comPonents.Defaultloader.loadTemplate (Name, MarkupString, Callback);});} else {callback (null);}}}; // Ersetzen Sie den ursprünglichen Standardloader und implementieren Sie die neue VorlagenFromurlloaderko.comPonents.unshifts.unShift (templatfromurllloader);2. Stecken Sie hartes Codeing in eine externe Datei, z. B. habe ich eine neue Datei.html -Datei erstellt.
3. Registrieren Sie die Komponente und beziehen Sie sich dann auf den externen Dateipfad auf dem Vorlagen -Tag, z.
ko.comPonents.register ('message-editor', {viewModel: function (params) {this.text = ko.observable (params && params.initialText || '' ');}, Vorlage: {fromUrl:' file.html '},});Okay, alle Funktionen sind fertig. Lassen Sie uns die Seite durchsuchen, um zu sehen, wie es aussieht? ? ?
Schließlich wurde die großartige Arbeit erledigt. Ist es richtig? Dann kann es auf das oben eingeführte Beispiel der "Baidu Library" erweitert werden. Wir können das HTML jedes Moduls in eine separate Datei einfügen.
<! DocType html> <html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <meta charset = "utf-8"/> <script src = "jquery-1. src = "Knockoutjs.js"> </script> </head> <body> <div daten-bind = 'component: {name: "message-editor", params: {initialText: "Hallo !!!" }} '> </div> <script type = "text/javaScript"> // Schritt 1: Schreiben Sie die LoadTemplate -Methode Var templateFromUrlloader = {loadTemplate: function (name, templateConfig, Rückruf) {if (templateconfig.fromurl) {var externer Dateiinhalt $ .get (fullurl, function (markupstring) {ko.comPonents.defaultloader.loadTemplate (Name, MarkupString, Callback);});} else {callback (null);}}}; // Ersetzen Sie den ursprünglichen Defaultloader und implementieren Sie den neuen neuer Abschluss. templateFromUrllloaderko.comPonents.loaders.unshift (templateFromUrlllloader); ko.comPonents.register ('message-editor', {viewModel: function (params) {this.text = ko.obserable (params && params.initialtext || },}); ko.applybindings (); </script> </body> </html>Das obige ist die Methode zum dynamischen Laden externer Dateien in KnockoutJs als Implementierungsmethode der Vorlagendatenquelle in der Komponente. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!