Zugriff auf externe Daten mit Knockout.js

Für die meisten Webanwendungen ist die Möglichkeit, Benutzereingaben über Formulare zu sammeln, ihre Hauptfunktion, dies kann jedoch beiseite gelassen werden, wenn die Anwendung als solche die Daten nicht an den Server senden oder empfangen kann.

Deshalb gibt es serverseitige Sprachen oder die Verarbeitung von a JSON um uns bei dieser Aufgabe zu helfen, wobei wir für die Zwecke dieses Tutorials verwenden werden jQuery als JavaScript-Framework zur Durchführung der Verarbeitung eines JSON, das dazu dient, die serverseitige Sprache zu ersetzen und uns Dateneingaben zur Verarbeitung in unserem Modell zur Verfügung stellt.

Anforderungen

Wir müssen haben Knockout.js in unserem System und zugänglich für die Anwendungen, die wir erstellen werden, brauchen wir auch jQuery die wir lokal oder von Ihrem CDN verwenden können. Berechtigungen zum Schreiben von Dateien, eine Internetverbindung zum Abrufen der Bibliotheken, wenn wir sie nicht haben, und einen Texteditor wie z Erhabener Text oder NotePad++. Zum Ausführen der Anwendungen benötigen wir einen Webservertyp Apache oder Nginx in unserer Testumgebung.

Wir beginnen direkt mit der Arbeit an der Anwendung und gehen nicht auf einige der in den Beispielen verwendeten Konzepte ein. Wir empfehlen daher, die Tutorials zu durchlaufen, die dynamische Änderungen, Formularhandhabung und natürlich Bindungen beinhalten Knockout.js.

Externe Daten lesen

Wir werden ein einfaches HTML-Dokument erstellen, das die Bibliothek von . enthält Knockout.js ebenso gut wie jQuery. Wir werden unser Formular erstellen, ohne dies zu vergessen Bindungen der Elemente darin und schließlich in der Logik für unsere Modell anzeigen Wir werden die Funktion erstellen, um die Änderungen in unserem Formular mit den Observablen zu behandeln, sehen wir uns den Code für unseren HTML-Code an:

 Externe Daten
Vollständiger Name:

Familienname, Nachname:
Lieblingsaktivitäten:
Daten hochladen

Wie wir sehen haben wir ein Dokument HTML Einfach mit wenigen Elementen, bestehend aus zwei Textfeldern und einer Auswahlliste, und wenn wir Beobachter sind, können wir sehen, dass unsere Observablen gleichermaßen leer sind. Zum Abschluss sehen wir uns an, wie unsere Ausgangsform aussieht:

Da wir unser Formular haben, müssen wir unser Beispiel verstehen und es soll externe Daten in unsere Anwendung laden können, deshalb sind unsere Observablen leer. Verwenden wir die jQuery-Methode namens $ .getJSON() die erhält a JSON Als Eingabe müssen wir für den Fall, dass wir mit einer serverseitigen Sprache arbeiten, den Pfad der Datei angeben, die sie als Ausgabe generiert, wie folgt:

 self.loadUserData = function () {$ .getJSON ("/get-user-data", function (data) {alert (data.name);}); }

Um die Dinge nicht zu komplizieren, verwenden wir a JSON bereits in unserer Anwendung generiert, dafür erstellen wir eine mit der folgenden Struktur, die ihre Werte auf Wunsch variieren kann:

 {"Vorname": "Vorname", "Nachname": "Nachname", "Aktivitäten": ["Fahrrad", "Videospiele", "Webentwicklung"], "Hobbys": "Lesen"}

Jetzt können wir unsere vorherige Funktion ändern und als Parameter den Namen unserer JSON-Datei senden, mal sehen:

 self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {alert (data.name);}); }

Indem wir diese Funktion in unseren Code aufnehmen, können wir überprüfen, wie unsere Methode funktioniert $ .getJSON() und erhalten so einen der darin enthaltenen Werte, die Reaktion unserer Anwendung beim Drücken der Taste Daten laden, es wird nur der Name angezeigt.

Wie wir sehen, funktioniert unsere Methode perfekt, jetzt müssen wir nur noch, nachdem wir die Werte unseres JSON erhalten haben, die Funktion in unsere aufnehmen Modell anzeigen und korrespondieren mit den Bezeichnern unseres Formulars, sehen wir uns an, wie unser endgültiger Code aussieht:

 Funktion UserViewModel () {var self = this; self.name = ko.observable (""); self.lastname = ko.observable (""); self.activities = ko.observableArray ([]); self.hobbies = ko.observable (""); self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {self.name (data.name); self.lastname (data.lastname); self.activities (data.activities); self.hobbies (data.hobbies);}); }} ko.applyBindings (neues UserViewModel ());

Jetzt müssen wir nur noch unser Beispiel im Browser ausführen und den Button drücken Daten hochladen die die Felder unseres Formulars sofort mit den Werten der . ausfüllen müssen JSON, mal sehen:

Wie wir sehen, hat es perfekt funktioniert und wir konnten externe Daten in wenigen einfachen Codezeilen auslesen. Dies ist in Bezug auf die Benutzerfreundlichkeit und Funktionalität unserer Anwendung sehr nützlich, aber wir können noch ein wenig mehr tun, wir können die Daten in einem JSON speichern und so die Funktionalität unserer Anwendung erweitern.

Speicherung der Daten

Bei herkömmlichen Webanwendungen ist das Speichern der Daten im JSON-Format so einfach wie das Konvertieren von Objekten in dieses Format und das Senden an den Server Knockout.js das Thema ist etwas komplizierter, da die Modell anzeigen Verwenden Sie Observables anstelle von normalen JavaScript-Eigenschaften, da Observables Funktionen sind und der Versuch, sie zu serialisieren und an den Server zu senden, zu unerwarteten Ergebnissen führen kann.

ko.toJSON ()Für diese Fälle haben wir Glück, denn Knockout.js bietet eine einfache und effektive Lösung, die Funktion ko.toJSON (), das alle Eigenschaften der beobachtbaren Objekte durch ihren aktuellen Wert ersetzt und das Ergebnis als String im Format . zurückgibt JSON.

Um diese neue Funktionalität in unserer Anwendung zu implementieren, werden wir in unserem Formular eine neue Schaltfläche namens . erstellen Daten speichern und unsere Funktion wird gebunden Daten speichernSehen wir uns an, wie unser Code mit den Modifikationen aussieht:

 Externe Daten
Vollständiger Name:
Familienname, Nachname:
Lieblingsaktivitäten:
Daten hochladen
Daten speichern

Wenn wir unser Beispiel im Browser ausführen, sehen wir, wie wir eine neue Schaltfläche haben, wir laden unsere Werte, die wir, wenn wir möchten, ändern können. Zum Schluss drücken wir den entsprechenden Button der uns die Werte in unserem Formular als String im Format anzeigen soll JSON, mal sehen wie es aussieht:

VERGRÖSSERN

Wenn wir schließlich möchten, dass diese Daten an ein Skript auf unserem Server gesendet werden, müssen wir nur einige Änderungen in unserer neu erstellten Funktion und bei der Verwendung der Methode vornehmen $ .post Wir schließen den Vorgang ab, zum Abschluss sehen wir uns an, wie er aussieht:

 self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Die Informationen wurden an den Server gesendet");}); }

Datenzuordnung zu Ansichtsmodellen

Die Art und Weise, wie wir mit unseren Informationen aus einem JSON umgehen, ist alles, was wir brauchen, um robuste Anwendungen zu erstellen und jede Art von serverseitiger sprachunabhängiger Lösung zu implementieren, solange sie mit JSON verarbeitet werden.

Aber wir können noch etwas weiter gehen und die JSON-Daten vom Server automatisch auf unsere abbilden Modell anzeigen und wir können dies mit einem Plug-in für erreichen Knockout.js namens Knockout-Mapping. Um es zu verwenden, müssen wir es zunächst aus seinem Repository auf GitHub herunterladen, in unser Projekt entpacken und nach unserem Framework einbinden, um Fehler aufgrund fehlender Abhängigkeiten zu vermeiden.

Jetzt müssen wir nur noch unseren Code ändern und unseren Button entfernen Lade Daten, sowie die ganze Logik von Knockout.js, da es dank unseres Plug-ins viel einfacher ist, die Informationen zu erhalten, sehen wir uns unseren endgültigen Code an:

 Externe Daten
Vollständiger Name:
Familienname, Nachname:
Lieblingsaktivitäten:

Wie wir sehen, wurde unsere Logik auf nur drei Codezeilen reduziert. Wenn unsere Anwendung geladen wird, stellt sie sofort eine Anfrage Ajax des JSON die mit den Elementen unseres Formulars übereinstimmen müssen. Dies nimmt die nativen Objekte von JavaScript und verwandelt jede Eigenschaft in ein Observable, vermeidet all diese Codezeilen und macht nicht nur unsere Anwendung robuster, sondern auch unseren Code lesbarer.

Zum Abschluss, wenn wir unsere Anwendung ausführen, sehen wir, wie automatisch unsere Werte in unser Formular geladen werden und wir können die Anfrage sehen Ajax zusammen mit der JSON-Antwort, wenn wir die Browserkonsole verwenden:

So haben wir dieses Tutorial beendet, wo wir sehen konnten, wie Knockout.js bietet uns eine Möglichkeit, Daten unabhängig von der verwendeten serverseitigen Sprache zu senden und zu speichern, dies gibt uns mehr Freiheit bei unserer Implementierung, indem wir nur die Sprache des Servers ändern auf PHP, Ruby oder Python um ein paar zu nennen.