Bei den meisten Webanwendungen besteht die Hauptfunktion darin, die Eingaben der Benutzer über die Formulare erfassen zu können. Dies kann jedoch außer Acht gelassen werden, wenn die Anwendung als solche die Daten nicht an den Server senden oder empfangen kann.
Aus diesem Grund unterstützen uns serverseitige Sprachen oder die Verarbeitung eines JSON bei dieser Aufgabe. In diesem Lernprogramm wird jQuery als JavaScript-Framework für die Verarbeitung eines JSON verwendet, das die Sprache ersetzt auf der Serverseite und wird uns einen Dateneintrag zur Verfügung stellen, der in unserem Modell verarbeitet werden soll.
Anforderungen
Wir müssen Knockout.js in unserem System haben und für die zu erstellenden Anwendungen zugänglich sein. Außerdem benötigen wir jQuery, das wir lokal oder über das CDN verwenden können. Berechtigungen zum Schreiben von Dateien, eine Internetverbindung, um die Bibliotheken abzurufen, wenn wir sie nicht haben, und ein Texteditor wie Sublime Text oder NotePad ++. Zum Ausführen der Anwendungen benötigen wir einen Apache- oder Nginx -Webserver in unserer Testumgebung.
Wir werden direkt mit der Arbeit an der Anwendung beginnen und nicht auf einige der in den Beispielen verwendeten Konzepte eingehen. Wir empfehlen daher, einen Spaziergang durch die Tutorials zu machen, die dynamische Änderungen , den Umgang mit Formularen und natürlich die Bindungen mit Knockout.js beinhalten .
Externes Datenlesen
Wir werden ein einfaches HTML-Dokument erstellen, das die Bibliothek Knockout.js sowie jQuery enthält . Wir werden unser Formular erstellen, ohne zu vergessen, die Bindungen der Elemente darin vorzunehmen, und schließlich werden wir in der Logik für unser VistaModel die Funktion erstellen, um die Änderungen in unserem Formular mit den Observablen zu behandeln. Sehen wir uns den Code für unser HTML an:
<html lang = 'en'> <head> <title> Externe Daten </ title> <meta charset = 'utf-8' /> </ head> <body> <h1> Zugriff auf externe Daten </ h1> <form action = "#" method = "post"> <p> Vollständiger Name: <input data-bind = 'Wert: Name' /> </ p> <p> Nachname: <input data-bind = 'Wert: Nachname' /> </ p> <div> Bevorzugte Aktivitäten: <select data-bind = 'Optionen: Aktivitäten, Wert: Hobbys'> </ select> </ div> <p> <button data-bind = 'click: loadDataUser'> Daten laden </ button> </ p> </ form> <script src = "js / knockout-3.3.0.js" type = "text / javascript"> </ script> <script src = "// oss.maxcdn.com/jquery/1.11.1/jquery.min.js"> </ script> <script type = 'text / javascript'> Funktion UserViewModel () { var self = this; self.name = ko.observable (""); self.lastname = ko.observable (""); self.activities = ko.observableArray ([]); self.hobbies = ko.observable (""); } ko.applyBindings (neues UserViewModel ()); </ script> </ body> </ html>
Wie wir sehen, haben wir ein einfaches HTML- Dokument mit ein paar Elementen, einschließlich zwei Textfeldern und einer Auswahlliste, und wenn wir Beobachter sind, können wir sehen, dass unsere Observablen gleichermaßen leer sind.
Da wir unser Formular haben, müssen wir unserem Beispiel einen Sinn geben und es ist die Kraft, externe Daten in unsere Anwendung zu laden. Deshalb sind unsere Observablen leer. Verwenden wir die jQuery-Methode mit dem Namen $ .getJSON (), die eine JSON- Eingabe empfängt. Wenn wir mit einer serverseitigen Sprache gearbeitet haben, müssen wir den Pfad der Datei angeben, die die Ausgabe generiert :
self.cargarDataUsuario = function () { $ .getJSON ("/ get-data-user", Funktion (Daten) { alert (data.name); }); }
Um die Dinge nicht zu komplizieren, verwenden wir einen JSON, der bereits in unserer Anwendung generiert wurde. Dazu erstellen wir einen JSON mit der folgenden Struktur, der die Werte variieren kann, wenn dies gewünscht wird:
{"name": "Name", "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.
self.cargarDataUsuario = function () { $ .getJSON ("informacion_usuario.json", Funktion (Daten) { alert (data.name); }); }
Indem wir diese Funktion in unseren Code aufnehmen, können wir überprüfen, wie unsere Methode funktioniert. $ .GetJSON () und somit einen der darin enthaltenen Werte erhalten. Die Antwort unserer Anwendung durch Drücken auf Load data (Daten laden) zeigt einfach den Namen an.
Da wir sehen, dass unsere Methode perfekt funktioniert, müssen wir jetzt nur noch die Werte unseres JSON ermitteln, um die Funktion in unser VistaModel aufzunehmen und die Korrespondenz mit den Bezeichnern unseres Formulars herzustellen. Schauen 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.cargarDataUsuario = function () { $ .getJSON ("informacion_usuario.json", Funktion (Daten) { self.name (data.name); self.lastname (data.lastname); Selbstaktivitäten (data.activities); self.hobbies (data.hobbies); }); } } ko.applyBindings (neues UserViewModel ());
Jetzt müssen wir nur noch unser Beispiel im Browser ausführen und auf die Schaltfläche Daten laden klicken, die die Felder unseres Formulars sofort mit den JSON- Werten füllen soll.
Wie wir sehen können, hat es perfekt funktioniert und wir konnten externe Daten in ein paar einfachen Codezeilen lesen. Dies ist im Hinblick auf die Benutzerfreundlichkeit und Funktionalität unserer Anwendung recht nützlich, aber wir können ein wenig mehr tun, die Daten in einem JSON speichern und so die Funktionalität unserer Anwendung erweitern.
Speichern der Daten
Für herkömmliche 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. Für Anwendungen, die Knockout.js verwenden, ist das Thema jedoch etwas komplizierter, da das VistaModel Observables in verwendet Anstelle von normalen JavaScript-Eigenschaften kann es zu unerwarteten Ergebnissen kommen, da die Observablen Funktionen sind und versucht wird, sie zu serialisieren und an den Server zu senden.
Um diese neue Funktionalität in unserer Anwendung zu implementieren, erstellen wir eine neue Schaltfläche in unserem Formular mit dem Namen ” Daten speichern” und unsere Funktion ” Daten speichern” wird verknüpft. Sehen wir uns an, wie unser Code mit den Änderungen aussieht:
<html lang = 'en'> <head> <title> Externe Daten </ title> <meta charset = 'utf-8' /> </ head> <body> <h1> Zugriff auf externe Daten </ h1> <form action = "#" method = "post"> <p> Vollständiger Name: <input data-bind = 'Wert: Name' /> </ p> <p> Nachname: <input data-bind = 'Wert: Nachname' /> </ p> <div> Bevorzugte Aktivitäten: <select data-bind = 'Optionen: Aktivitäten, Wert: Hobbys'> </ select> </ div> <p> <button data-bind = 'click: loadDataUser'> Daten laden </ button> </ p> <p> <button data-bind = 'click: saveData'> Daten speichern </ button> </ p> </ form> <script src = "js / knockout-3.3.0.js" type = "text / javascript"> </ script> <script src = "// oss.maxcdn.com/jquery/1.11.1/jquery.min.js"> </ script> <script type = 'text / javascript'> Funktion UserViewModel () { var self = this; self.name = ko.observable (""); self.lastname = ko.observable (""); self.activities = ko.observableArray ([]); self.hobbies = ko.observable (""); self.cargarDataUsuario = function () { $ .getJSON ("informacion_usuario.json", Funktion (Daten) { self.name (data.name); self.lastname (data.lastname); Selbstaktivitäten (data.activities); self.hobbies (data.hobbies); }); } self.guardarData = function () { alert (ko.toJSON (self)); } } ko.applyBindings (neues UserViewModel ()); </ script> </ body> </ html>
Wenn wir unser Beispiel im Browser ausführen, sehen wir, wie wir eine neue Schaltfläche haben, laden wir unsere Werte, die wir ändern können, wenn wir wollen. Zum Schluss drücken wir den entsprechenden Button, der uns die Werte in unserem Formular als String im JSON- Format anzeigen soll. Schauen wir uns an, wie es aussieht: 
Wenn wir möchten, dass diese Daten an ein Skript auf unserem Server gesendet werden, müssen wir nur einige Änderungen an unserer neu erstellten Funktion vornehmen. Wenn wir die $ .post- Methode verwenden, schließen wir den Vorgang ab, um zu sehen, wie er aussieht:
self.guardarData = function () { var data_enviar = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_enviar, Funktion (Daten) { alert ("Die Informationen wurden an den Server gesendet"); }); }
Zuordnung von Daten zu VistaModelos
Die Art und Weise, wie wir mit unseren Informationen aus einem JSON umgehen, ist alles, was wir benötigen, um robuste Anwendungen zu erstellen und jede Art von Lösung unabhängig von der serverseitigen Sprache zu implementieren, sofern diese mit JSON verwaltet werden.
Wir können jedoch noch einen Schritt weiter gehen und die JSON-Daten vom Server automatisch unserem VistaModel zuordnen. Dies erreichen wir mit einem Knockout.js- Plug-In namens Knockout-Mapping . Um es zu verwenden, müssen wir es zuerst aus seinem GitHub-Repository herunterladen, in unser Projekt dekomprimieren und nach unserem Framework einbinden, um Fehler aufgrund fehlender Abhängigkeiten zu vermeiden.
Jetzt müssen wir nur noch unseren Code ändern und unsere Schaltfläche zum Laden von Daten sowie die gesamte Logik von Knockout.js entfernen , da das Abrufen von Informationen dank unseres Plug-ins viel einfacher wird. Sehen wir uns unseren endgültigen Code an:
<html lang = 'en'> <head> <title> Externe Daten </ title> <meta charset = 'utf-8' /> </ head> <body> <h1> Knockout-Mapping verwenden </ h1> <form action = "#" method = "post"> <p> Vollständiger Name: <input data-bind = 'Wert: Name' /> </ p> <p> Nachname: <input data-bind = 'Wert: Nachname' /> </ p> <div> Bevorzugte Aktivitäten: <select data-bind = 'Optionen: Aktivitäten, Wert: Hobbys'> </ select> </ div> </ form> <script src = "js / knockout-3.3.0.js" type = "text / javascript"> </ script> <script src = "js / knockout-mapping.js" type = "text / javascript"> </ script> <script src = "// oss.maxcdn.com/jquery/1.11.1/jquery.min.js"> </ script> <script type = 'text / javascript'> $ .getJSON ("informacion_usuario.json", Funktion (Daten) { var UserViewModel = ko.mapping.fromJS (data); ko.applyBindings (UserViewModel); }); </ script> </ body> </ html>
Wie wir sehen, ist unsere Logik auf nur drei Codezeilen reduziert. Wenn unsere Anwendung geladen wird, führt sie sofort eine Ajax- JSON- Anforderung aus, die den Elementen unseres Formulars entsprechen muss. Es verwendet die nativen JavaScript- Objekte und wandelt jede Eigenschaft in eine beobachtbare um, wobei all diese Codezeilen vermieden werden und nicht nur unsere robusteste Anwendung, sondern auch unser am besten lesbarer Code erstellt wird.
Wenn wir unsere Anwendung ausführen, sehen wir, wie unsere Werte automatisch in unser Formular geladen werden. Wenn wir die Browserkonsole verwenden, sehen wir die Ajax- Anfrage zusammen mit der Antwort JSON:
Wir haben dieses Tutorial beendet, in dem wir sehen konnten, wie Knockout.js uns die Möglichkeit bietet, Daten unabhängig von der verwendeten serverseitigen Sprache zu senden und zu speichern. Dies gibt uns mehr Freiheit bei der Implementierung, indem nur die Serversprache durch PHP geändert wird , Ruby oder Python, um nur einige zu nennen.