Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Mit knockout.js in den Ring

by
Read Time:12 minsLanguages:
This post is part of a series called Into the Ring with Knockout.js.
Into the Ring with knockout.js: Part 2 - the Rematch

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In der roten Ecke mit einem Gewicht von nur 29 KB (unkomprimiert) befindet sich knockout.js; Eine reine JavaScript-Bibliothek, die die Erstellung dynamischer Benutzeroberflächen vereinfacht. Knockout ist bibliotheksunabhängig und kann daher problemlos mit den beliebtesten bereits verfügbaren JavaScript-Bibliotheken verwendet werden. Es funktioniert jedoch besonders gut mit jQuery und verwendet jQuery.tmpl als Standard-Template-Engine.

Knockout ist kein Ersatz für jQuery.

Knockout ist kein Ersatz für jQuery. jQuery ist sehr beliebt, wie Sie alle wissen, bin ich selbst ein großer Fan davon und es ist sehr gut darin, was es tut. Es ist jedoch schwierig, komplexe Benutzeroberflächen nur mit jQuery zu erstellen. Je größer die Anwendung hinter der Benutzeroberfläche ist und je mehr der Benutzer mit ihr interagieren kann, desto schwieriger wird es, einen Anschein von Ordnung aufrechtzuerhalten. Event-Handler gibt es zuhauf, und Sie erhalten schnell buchstäblich Hunderte von Codezeilen.

Es ist durchaus möglich, komplexe und hochdynamische Benutzeroberflächen nur mit jQuery zu erstellen. Verfügt das Budget Ihres Projekts jedoch über die erforderliche Zeit, um mehr als 800 Codezeilen zu schreiben und zu debuggen? Was ist in 6 Monaten, wenn etwas geändert oder hinzugefügt werden muss? Hier kommt Knockout ins Spiel.

Überblick

In diesem Tutorial erstellen wir eine einfache Oberfläche, die eine Liste von Kontakten anzeigt und es dem Besucher dann ermöglicht, mit der Benutzeroberfläche zu interagieren, um die Anzeige der Daten zu ändern, z. B. die Liste zu filtern oder zu sortieren. Wir werden Knockout als Ebene zwischen unseren Daten und der Seite verwenden, um die Erstellung und Verwaltung oder unsere Benutzeroberfläche zu vereinfachen.


Runde 1 - Erste Schritte

Knockout verwendet eine View-model-view-Modellarchitektur. Die sichtbare Liste der Kontakte, die wir in diesem Beispiel verwenden, und die Elemente auf der Seite, aus denen sie bestehen, können als Ansicht betrachtet werden. Die auf der Seite angezeigten Daten sind das Modell. Das Ansichtsmodell ist eine Darstellung des aktuellen Status der Benutzeroberfläche, eine Kombination aus Daten und Ansicht, die auch das Verhalten enthält, das zur Interaktion mit dem Modell und zur Aktualisierung der Ansicht verwendet wird.

Beginnen wir mit der Erstellung der benötigten Ordnerstruktur und der Basisseite, mit der wir arbeiten werden. Erstellen Sie irgendwo auf Ihrem System einen neuen Ordner mit dem Namen Knockout. Erstellen Sie dann in diesem Ordner drei neue Ordner mit den Namen css, img und js. Der css-Ordner enthält das einfache Stylesheet, das wir verwenden, und der img-Ordner das Einzelbild. Der Ordner js enthält die von uns erstellte Skriptdatei sowie die Bibliotheken, von denen wir abhängig sind. Zu Beginn muss dieser Ordner die folgenden Dateien enthalten:

  • jquery.tmpl.js
  • jquery-1.6.2.js
  • knockout-1.2.1.js

Erstellen Sie nun in Ihrem Texteditor die folgende Basisseite:

Speichern Sie diese Seite als index.html im Root-knockout-Ordner. Bisher gibt es hier nichts Bemerkenswertes außer der Verwendung von HTML5. Obwohl knockout.js mit früheren HTML-Versionen kompatibel ist, sind die Attribute, die wir unseren Elementen hinzufügen, nicht Teil des Standard-HTML 4.01-Standards, und die Seite ist daher ungültig. Das ist bei HTML5 nicht der Fall, bei dem data-* -Attribute zum Einbetten benutzerdefinierter Daten definiert werden.

Wir verwenden für dieses Beispiel auch ein einfaches Stylesheet, das jedoch nur für dieses spezielle Beispiel verwendet wird und völlig willkürlich ist. Da das kein CSS-Tutorial ist, werde ich es hier nicht zeigen. Wenn Sie jedoch neugierig sind, schauen Sie sich die Datei in der Demo an.

Die Verhaltensdatei

Dann können wir unsere Verhaltensdatei erstellen. Fügen Sie auf einer neuen Seite in Ihrem Texteditor den folgenden Code hinzu:

Speichern Sie diese Datei als behaviour.js im Ordner js. Wir beginnen mit der Definition einer selbstaufrufenden Funktion, an die wir jQuery übergeben, um das $-Zeichen zu aliasen.

Wir definieren dann das Modell, das wir verwenden werden. In diesem Beispiel handelt es sich um ein lokales Array, aber wir könnten leicht genug genau das gleiche Datenformat von einem Webdienst erhalten. Unser array enthält eine Reihe von Personen object, die einzelnen Einträgen in einer contacts Datenbank entsprechen. Meistens bestehen unsere Daten aus einfachen Zeichenfolgen, aber jedes object enthält auch eine deleteMe method, mit der das object aus dem viewModel entfernt wird.

Denken Sie daran, dass das viewModel auf den aktuellen Status der Benutzeroberfläche verweist. Es ist ein Objekt, und das erste Element, das wir hinzufügen, ist array, das die Personenobjekte enthält. Wir verwenden die Knockout-method ko.observableArray(), um array zum viewModel-object hinzuzufügen. Observables sind ein grundlegender Aspekt von knockout.js; Wir weisen Knockout an, anderen Entitäten zu ermöglichen, diese Elemente zu beobachten und zu reagieren, wenn sie sich ändern.

Das ist alles, was unser Ansichtsmodell derzeit enthält, obwohl wir nach dem Wert der Eigenschaft people ein hängendes Komma hinterlassen haben, wenn wir weitere Eigenschaften hinzufügen.

Nach dem object object verwenden wir die ko.applyBindings() -method, um alle von uns erstellten Bindungen anzuwenden und mit der Verwaltung des viewModel zu beginnen. Zu diesem Zeitpunkt im Beispiel haben wir noch keine Bindungen hinzugefügt. Um Bindungen zwischen unserer view und viewModel zu erstellen, müssen wir etwas mehr HTML hinzufügen.


Runde 2 - Erstellen von einem View

Knockout funktioniert hervorragend mit jQuery-Vorlagen.

Wir haben jetzt unser model und ein einfaches viewModel installiert. Als nächstes sollten wir die Daten aus dem viewModel auf der Seite anzeigen. Knockout funktioniert hervorragend mit jQuery-Vorlagen. Dies ermöglicht es uns, das tmpl-Plugin zu verwenden, um den erforderlichen HTML-Code zu erstellen. Fügen Sie dem <body> -Element der Seite direkt vor den <script> -Elementen den folgenden Code hinzu:

Wir fügen zuerst ein leeres <div> -Element mit einer id hinzu - hauptsächlich für Stylingzwecke. Dieses Element hat auch ein spezielles Attribut - data-bind. Dieses Attribut teilt Knockout mit, dass das Element seine Daten im viewModel speichert. Wenn wir in unserem JS ko.applyBindings() aufrufen, wird diese Bindung angewendet. In diesem Fall verwenden wir die Vorlagenbindung, mit der wir den Namen einer Vorlage angeben können, die wir in einem an die Bindung übergebenen Konfigurationsobjekt verwenden möchten.

Wir verwenden auch die foreach-Eigenschaft in diesem Konfigurationsobjekt und geben den Namen unserer beobachtbaren Personen observableArray als Quelle für unsere Daten an. Wir könnten die Standard-tmpl-Syntax {{each}} verwenden, um unsere Personendaten zu durchlaufen, aber es ist effizienter, stattdessen die Knockout-Syntax zu verwenden. Da unsere Personendaten in einem beobachtbaren array enthalten sind, überwacht Knockout das array auf Änderungen und aktualisiert bei Auftreten automatisch alle Vorlagen, in denen die Daten angezeigt werden. Wenn wir die tmpl-Syntax verwenden, wird unsere gesamte Vorlage jedes Mal neu gerendert, wenn sich die Daten ändern. Wenn wir jedoch die foreach-Eigenschaft von knockout verwenden, wird nur die einzelne Instanz neu gerendert, die dem geänderten Element entspricht.

Nach dem Container <div> definieren wir dann unsere Vorlage. Dies erfolgt auf die gleiche Weise wie bei einer normalen tmpl-Vorlage. In der Vorlage geben wir die Elemente an, die für jedes Objekt in unserer Datenquelle wiederholt werden sollen. Wir haben ein <section> -Element als Container, gefolgt von einem geeigneten Element für jedes Element innerhalb des person  object. Eine Sache zu beachten ist, dass wir Bindungen in unserem Vorlagencode bereitstellen können. Wir fügen einer Löschschaltfläche ein data-bind-Attribut hinzu. Dieses Mal verwenden wir die click-Bindung und geben den Namen der person an, die in jedem person object gefunden wurde.

Wenn wir die Seite in einem Browser ausführen, sollten wir feststellen, dass unsere Seite die Daten aus unserem viewModel enthält, die mithilfe unserer Vorlage gut gerendert wurden:

Das ist also ziemlich cool, oder? Aber es ist nicht so unähnlich, das tmpl-Plugin zu verwenden.

Das wirklich Coole ist, dass nicht nur view entsprechend aktualisiert wird, wenn sich das viewModel ändert, sondern auch das viewModel, wenn sich die Ansicht ändert. Wenn wir also auf eine der Löschschaltflächen auf unserer Seite klicken, wird im people array auch das entsprechende person object entfernt!

Das ursprüngliche array, das wir an die ko.observable() method übergeben haben, wird nicht aktualisiert, aber normalerweise würden wir unsere Daten wahrscheinlich von einer AJAX-Anfrage erhalten, anstatt sie fest in die Seite zu codieren, also alles, was wir brauchen würden Um dies zu tun, müssen Sie die Daten erneut einreichen, wobei person entfernt wird.


Runde 3 - Hinzufügen neuer Daten

Wir haben die Möglichkeit, ein person object zu entfernen. Als Nächstes können wir unserem dataModel die Möglichkeit hinzufügen, eine neue Person hinzuzufügen. Aktualisieren Sie den Container <div>, den wir zuvor zur Seite hinzugefügt haben, so, dass er die folgenden neuen Elemente enthält:

Das erste neue Element, das wir hinzufügen, ist ein <a> -Tag, mit dem das Formular geöffnet wird, das die neuen Daten akzeptiert. Dies ähnelt der Vorgehensweise in einer regulären jQuery-Implementierung, mit der Ausnahme, dass wir auch einen Ereignishandler hinzufügen müssen, um auf Klicks auf das Element zu warten und beispielsweise das Ereignis zu stoppen. Mit Knockout müssen wir uns darüber keine Sorgen machen. Wir müssen lediglich den Namen einer method in unserem viewModel angeben, die wir ausführen möchten, wenn auf das Element geklickt wird. Knockout wird den Handler anhängen und verhindern, dass der Link für uns verfolgt wird.

Wie Sie sehen können, können wir mehrere Bindungen für ein Element angeben. Unser <a> -Element verwendet auch die sichtbare Bindung. Auch hier geben wir eine Eigenschaft unseres viewModel an, außer dass es sich diesmal nicht um eine Funktion handelt, sondern um eine einfache Variable, die einen boolean Wert enthält. Sie werden sehen, wie dies funktioniert, wenn wir gleich das JS für unsere neue Funktionalität hinzufügen.

Nach dem Link fügen wir außerdem ein <fieldset> hinzu, das Beschriftungen und Eingaben enthält, mit denen wir die relevanten Daten hinzufügen können, um ein neues object in unserem people array zu erstellen. Am Ende unseres neuen HTML-Codes fügen wir zwei neue <button> -Elemente hinzu. beiden wurden Klickbindungen hinzugefügt. Der erste verweist auf die addPerson method, der zweite auf die hideForm method. Das Hochladen von Bildern funktioniert in diesem Beispiel nicht wirklich, es ist nur zur Show da.

Schauen wir uns nun das neue JavaScript an, das wir benötigen. Fügen Sie den folgenden Code direkt nach der people-Eigenschaft unseres viewModel hinzu (wir haben ein hängendes Komma hinterlassen, um diese neuen Eigenschaften und Methoden hinzuzufügen):

Die erste Eigenschaft ist displayButton, eine beobachtbare Eigenschaft (deren Wert möglicherweise von anderen Entitäten beobachtet wird). Die Entität, die ihren Wert beobachtet, ist unser <a> -Element in der Ansicht. Wir haben es zunächst auf true gesetzt. Wenn also die Seite geladen wird (oder besser gesagt, wenn die Methode applyBindings() aufgerufen wird), wird der Link sichtbar.

Die nächste Eigenschaft heißt displayForm. Dies ist auch eine beobachtbare Eigenschaft, außer dass wir sie diesmal auf false setzen, sodass das Element in unserer Ansicht, das sie beobachtet ( fieldset), zunächst ausgeblendet wird.

Wir fügen dann zwei Methoden hinzu: showForm() und hideForm(). Diese beiden einfachen Methoden werden offensichtlich verwendet, um das Formular anzuzeigen bzw. auszublenden. Dazu müssen Sie lediglich die beobachtbare Eigenschaft displayForm auf true oder false setzen. Da der Wert beobachtet wird, wird unsere Ansicht jedes Mal automatisch aktualisiert, wenn sich ihr Wert ändert.

Wir passen auch die showButton-Eigenschaft an, wenn sich der Status des Formulars ändert. Wenn das fieldset sichtbar ist, wird der Link ausgeblendet, und wenn das fieldset ausgeblendet wird, wird die Schaltfläche wieder sichtbar gemacht. Wie Sie sehen können, unterstützt Knockout die Verkettung, wodurch das Aktualisieren mehrerer Eigenschaften in unserem viewModel extrem einfach ist. Die Ansicht sollte folgendermaßen aussehen, wenn das Formular sichtbar ist:

Die letzte Methode, die wir hinzufügen, ist die addPerson() method, mit der unser viewModel mit den Details der neuen Person aktualisiert wird. Alles, was wir bei dieser Methode tun, ist, das Formular auszublenden und die Schaltfläche anzuzeigen, ein Objektliteral zu erstellen, das die in die Textfelder eingegebenen Werte enthält, und dieses object dann in unser people array zu verschieben.

Um das aktualisierte people array aus unserem viewModel abzurufen, können wir den in JSON-Serialisierer integrierten Knockout verwenden, um das beobachtbare array in ein JSON-object zu schreiben. Normalerweise würden wir das machen, um die Daten an den Server zurückzugeben, aber um sie zu testen, könnten wir diese Codezeile am Ende der addPerson() method hinzufügen:

Die ko.toJSON() method generiert hilfreich ein JSON-object, das den aktuellen Inhalt von dem people array enthält, das wir in Firebug sehen können (andere DOM-Explorer sind verfügbar):


Abschluss nach dem Kampf

In diesem Tutorial haben wir zwei Hauptaspekte von knockout.js behandelt - deklarative Bindungen und Observablen.

Die Bindungen werden in unserem HTML angewendet und geben Eigenschaften und Arrays von Daten an, deren Werte bei Änderungen beachtet werden sollten. Wenn sich diese Werte ändern, werden die Elemente in der Ansicht, die sie beobachten, automatisch aktualisiert, entweder durch Anwenden einer neuen Iteration einer Vorlage oder durch Ein- oder Ausblenden eines Elements wie in diesem Beispiel.

Es gibt auch andere Bindungen, mit denen wir verschiedene Aktionen ausführen können, wenn die Ansicht interagiert oder die Daten im viewModel aktualisiert werden.

Knockout.js ist eine äußerst hilfreiche Ebene, die sich zwischen der Benutzeroberfläche unserer Benutzeroberfläche und den zugrunde liegenden Daten befindet und Interaktionen und Statusänderungen für uns verwaltet. Es macht so viel Arbeit für uns, obwohl wir in diesem grundlegenden Beispiel wirklich nur die Oberfläche dessen zerkratzt haben, wozu es fähig ist. Was denkst du über knockout.js?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.