Erste Schritte mit Knockout.js

Die Übertragung des schwierigsten Teils der Anwendung auf die Client-Seite wird immer häufiger, sodass Serversprachen nur noch diejenigen sind, die Persistenz durch Dienste verarbeiten SICH AUSRUHEN.
Ein Teil der Verantwortung dafür, dass all dies geschieht, liegt in der neuen Art der Zusammenarbeit mit JavaScript und die Generierung dynamischer und reaktionsschneller Benutzeroberflächen dank der unterschiedlichen Rahmen bestehender.
Dieses Framework hat viele Stärken wie sein geringes Gewicht und seine Dokumentation, ist aber auch schon lange auf dem Markt, so dass es konsequent gereift ist, um in Produktionsumgebungen eingesetzt werden zu können.
1- Wie die meisten Bibliotheken und Frameworks von JavaScript die Anforderungen sind nicht so anspruchsvoll, in diesem Fall benötigen wir einen kleinen Webserver, um unsere Anfragen besser verarbeiten zu können, das kann sein Wamp In Fenster oder eine Instanz von Apache In Linux oder Mac.
2- Wir brauchen einen Rich-Text-Editor im Stil von Erhabener Text oder Notizblock ++ in der Lage sein, den notwendigen Code zu schreiben, um die Beispiele und Übungen zu erfüllen, die wir zeigen werden.
3- Schließlich brauchen wir einen Internetzugang, um herunterladen zu können Knockout.js sogar einmal.
Der Installationsprozess ist recht einfach und hängt nicht von einer bestimmten Plattform ab. Der Prozess ist derselbe, egal ob wir dabei sind Windows, Linux oder MAC.
Das erste, was wir tun müssen, ist herunterladen Knockout.js Von seiner offiziellen Seite können wir dazu auf die Projektwebsite und in den Abschnitt von gehen Downloads Wir klicken mit der rechten Maustaste und wählen die Option Verknüpfung speichern unter:

VERGRÖSSERN

Es ist wichtig, dass wir die Datei in einem für unser Projekt relevanten Ordner speichern, um sie einzubinden. Es kann auch installiert werden mit Laube oder verwenden Sie es sogar von einem der CDNs Dienste, um unseren Server nicht als Bibliotheksrepository verwenden zu müssen.
Sobald wir die Datei haben, müssen wir sie nur noch in eine Datei aufnehmen HTML wie folgt:

 Knockout.js installieren 

Wie wir sehen, mussten wir nur die heruntergeladene Datei über ein Skript-Tag einbinden. Falls wir mit der Version des . arbeiten wollen CDN Wir müssen nur den lokalen Pfad in den Internetpfad der Datei ändern, dies ist sehr ähnlich wie bei der Arbeit mit Bibliotheken wie jQuery oder Rahmen wie AngularJS.
Modellansicht Modell anzeigenDer Titel dieses Abschnitts mag wie ein Fehler erscheinen: Wie kann man über Model View View Model sprechen? Es ist nicht das Gleiche? Es stellt sich heraus, dass Schlagen hat ein Designmuster oder ein Entwicklungsparadigma, von dem es inspiriert ist MVC, wo sicherlich die Modell und das Sicht sie verhalten sich wie das, was wir vom "klassischen" Ansatz kennen, jedoch haben wir eine neue Ebene namens Modell anzeigen die dafür verantwortlich ist, unsere Ansichten zu vereinen und ihnen Funktionalität zu verleihen.
Datenbindung ist das Hauptmerkmal unseres Frameworks, das es uns ermöglicht, auf das Dokument hinzuweisen HTML Auf welche Elemente müssen Sie Zugriff gewähren Knockout.js, obwohl es sich wie etwas Komplexes anhört, können wir es einfacher zusammenfassen, es ist die einfache Anwendung von Eigenschaften auf die Elemente des Baumes SONNE wo wir wollen, dass es Leistung hat Knockout.js.
Sehen wir uns den folgenden Beispielcode an. Nehmen wir an, wir möchten einen Namen aus unserem drucken Modell anzeigen auf einem Etikett in der Karosserie, dazu müssen wir nur Folgendes tun:

 Knockout.js installieren 

Das sehen wir in unserem Label h1 es gibt ein span-Tag und das span-Tag hat eine Eigenschaft, die nicht nativ ist für HTML Was ist das Eigentum? Datenbindung, das verbindet uns Knockout.js mit unserer DOM-Baum in diesem Fall haben wir lediglich angegeben, dass der Eigenschafts- oder Variablenname aus unserem Modell anzeigen.
Wenn wir unser Beispiel im Browser ausführen, erhalten wir ein Ergebnis wie das, das wir in der folgenden Abbildung sehen können:

Damit haben wir bereits unseren ersten Antrag gestellt mit Knockout.js.
Inzwischen müssen wir diese Philosophie erkannt haben Modell anzeigen ist ein wichtiger Teil der Arbeit in Knockout.js, deshalb werden wir uns weiter mit dem Thema beschäftigen.
Erstellung von VistaModelEs gibt zwei Möglichkeiten, eine Modellansicht zu erstellen, die Grundform und die objektorientierte. Welche wir verwenden, hängt bereits von unserer Entwicklungsweise ab, obwohl die empfohlene ist objektorientierter denn obwohl es am Anfang komplexer ist, ermöglicht es uns, eine bessere Ordnung in unserer Anwendung zu erreichen.
Um ein zu erstellen Modell anzeigen Grundsätzlich müssen wir nur so etwas tun:

 var myModelView = {Name: 'Pedro Perez'};

Aus unserer Sicht ist es überhaupt nicht komplex, wir definieren einfach eine Variable und platzieren darauf einen Stilinhalt. JSON.
Nun der Weg objektorientierter ermöglicht es uns, Methoden für den Zugriff und die Manipulation der Eigenschaften zu erstellen, die wir in unserem Modell anzeigen, dafür können wir etwa Folgendes tun:

 var myOOOOOOFModelView = Funktion () {var self = this; self.name = 'Jonathan'; selbst.nachname = 'Acosta'; self.getName = function () {return self.name + '' + self.last name; };};

Wenn wir möchten, können wir in diesem Fall direkt auf den Vor- oder Nachnamen einzeln zugreifen oder die Methode verwenden getName() das gibt uns den Vor- und Nachnamen verbunden oder verkettet.
Hier mögen sich viele fragen, ob es nicht einfacher war, ein Solo zu machen Zeichenfolge Beim Vor- und Nachnamen ist die Antwort ganz einfach, je mehr Möglichkeiten wir haben, desto einfacher wird die Anwendung aus unserer Sicht, stellen Sie sich vor, wir wollten nur den Namen, mit der Grundform hätten wir den String verarbeiten müssen trennen können, greifen wir bei der objektorientierten Veränderung nur auf die Eigenschaft zu, die uns interessiert.
Was wir bisher gesehen haben, ist sehr statisch, was wäre, wenn wir jetzt Parameter verwenden, auf diese Weise a Modell anzeigen Es kann vielen Zwecken dienen, da wir uns nicht auf das beschränken, was wir festlegen, sondern die Daten je nach Situation ändern können.
Lass uns unsere Form umschreiben objektorientierter, und wir verwenden das folgende Formular:

 var myOOOOOOOFModelView = Funktion (Vorname, Nachname) {var self = this; self.name = Name; self.nachname = Nachname; self.getName = function () {return self.name + '' + self.last name; };};

Wie wir gesehen haben, war es sehr einfach die Verwendung von Parametern zu implementieren, jetzt werden wir dies in unserem ersten Beispiel implementieren und damit sehen, wie alles zusammenpasst, dazu verwenden wir folgenden HTML-Code:

 Knockout.js installieren 

Hier fällt als erstes auf, dass die Datenbindung es ist nicht länger Text wie im ersten Beispiel, wenn nicht, verwenden wir html, damit können wir Etiketten versenden html und können so unserer Antwort von der Modell anzeigen.
Bereits in dem Abschnitt, in dem wir unsere definieren Modell anzeigen Wir sehen das, bevor wir das anwenden Bindung von Knockout.js, wir machen eine Instanz unseres ViewModel objektorientierter, An dieser Stelle können wir unseren Parametern oder Eigenschaften die Werte zuweisen, wie wir sehen können, haben wir unsere Trennung von Vor- und Nachname beibehalten, aber am Ende können wir die Methode verwenden, die sie verkettet.
Wenn wir unser Beispiel ausführen, erhalten wir die folgenden Ergebnisse im Browser:

Es wird diejenigen geben, die sich fragen, was dieser Rahmen hat, was er noch nicht bietet AngularJS oder Backbone.js, und sie haben recht in ihrer Fragestellung, aber die Antwort, die wir ihnen geben, ist, dass es nur eine weitere Option ist, die ihnen zur Verfügung steht, sie hat ihre Stärken wie eine gute Dokumentation und das geringe Gewicht der Implementierung (nur ca kb), Aber wie bei allem ist es jedem freigestellt, das Werkzeug zu wählen, mit dem er seine Ziele erreichen kann und das den aktuellen Anforderungen am besten entspricht.
Damit beenden wir unser Tutorial, mit dem wir unsere ersten Schritte erfolgreich gemacht haben Knockout.js, damit können wir beginnen, über alle Möglichkeiten nachzudenken, die uns dieses Anwendungsentwicklungs-Framework mit clientseitiger Logik bietet.