Share
Diese Lektion ist eine umfassende Übersicht über die Hauptkomponenten von Knockout.js. Durch die Implementierung einer konkreten Beispielanwendung werden wir sehen, wie ViewModel, Ansicht, Observables und Bindungen von Knockout interagieren, um eine dynamische Benutzeroberfläche zu erstellen.
Zuerst erstellen wir eine einfache HTML-Seite, die den gesamten Code enthält, dann definieren wir ein ViewModel-Objekt, machen einige Eigenschaften verfügbar und fügen sogar eine interaktive Bindung hinzu, sodass wir auf Klicks von Benutzern reagieren können.
Laden Sie die neueste Version von Knockout.js von der Downloadseite auf GitHub.com herunter, bevor Sie mit dem Schreiben von Code beginnen. Zum jetzigen Zeitpunkt ist die neueste Version 2.1.0. Danach können Sie die Bibliothek einer HTML-Seite hinzufügen.
Beginnen wir mit einer Standard-HTML-Seite. Erstellen Sie in demselben Ordner wie Ihre Knockout.js-Bibliothek eine neue Datei mit dem Namen index.html und fügen Sie Folgendes hinzu. Stellen Sie sicher, dass Sie knockout-2.1.0.js in den Dateinamen der Knockout.js-Bibliothek ändern, die Sie heruntergeladen haben.
Beispielcode: item1.htm
Hallo, Knockout.js
Bills Einkaufswagen
Dies ist eine einfache HTML 5-Webseite, die die Bibliothek Knockout.js im unteren Bereich von enthält ; Wie jedes externe Skript können Sie es jedoch an beliebiger Stelle (innerhalb von) einfügen ist die andere übliche Option). Das style.css-Stylesheet ist für keines der Beispiele in dieser Serie tatsächlich erforderlich, aber es macht sie für die Augen viel einfacher. Sie finden es in Anhang A oder können von https://bitbucket.org/syncfusion/knockoutjs_succinctly heruntergeladen werden. Wenn Sie die Seite in einem Webbrowser öffnen, sollten Sie Folgendes sehen:
Abbildung 8: Grundlegende Webseite Da wir noch nicht mit persistenten Daten arbeiten, steht uns kein Modell zur Verfügung. Stattdessen springen wir direkt zum ViewModel. Bis zu Lektion 7: verwenden wir eigentlich nur ein View-ViewModel-Muster.
Abbildung 9: Fokussierung auf die Ansicht und ViewModel vorerst Denken Sie daran, dass ein ViewModel eine reine JavaScript-Darstellung Ihrer Modelldaten ist. Als erstes verwenden wir nur ein natives JavaScript-Objekt als ViewModel. Unter der
Dies erstellt eine "Person" namens John Smith und die ko.applyBindings () Die Methode weist Knockout.js an, das Objekt als ViewModel für die Seite zu verwenden.
Wenn Sie die Seite neu laden, wird natürlich immer noch "Bill's Shopping Cart" angezeigt. Damit Knockout.js die Ansicht basierend auf dem ViewModel aktualisieren kann, müssen wir dies tun binden ein HTML-Element zum personViewModel Objekt.
Knockout.js verwendet ein spezielles Datenbindung Attribut, um HTML-Elemente an das ViewModel zu binden. Ersetzen Sie Bill in der
tag mit einem leeren Element wie folgt:
Einkaufswagen
Der Wert des data-bind-Attributs teilt Knockout.js mit, was im Element angezeigt werden soll. In diesem Fall ist die Text binding weist Knockout.js an, die Eigenschaft firstName des ViewModel anzuzeigen. Wenn Sie nun die Seite neu laden, ersetzt Knockout.js den Inhalt der mit personViewModel.firstName. Daraufhin sollte in Ihrem Browser "John's Shopping Cart" angezeigt werden:
Abbildung 10: Screenshot unserer ersten gebundenen Ansichtskomponente Wenn Sie das data-bind-Attribut in text: lastName ändern, wird in ähnlicher Weise „Smith's Shopping Cart“ angezeigt. Wie Sie sehen, wird beim Binden eines Elements nur eine HTML-Vorlage für Ihr ViewModel definiert.
Wir haben also ein ViewModel, das in einem HTML-Element angezeigt werden kann, aber beobachten Sie, was passiert, wenn wir versuchen, die Eigenschaft zu ändern. Nach dem anrufen ko.applyBindings (), Weisen Sie personViewModel.firstName einen neuen Wert zu:
ko.applyBindings (personViewModel); personViewModel.firstName = "Ryan";
Knockout.js Gewohnheit Die Ansicht wird automatisch aktualisiert, und auf der Seite wird immer noch "Johns Einkaufswagen" angezeigt Vorname Eigenschaft an Knockout.js. Alle Eigenschaften, die Knockout.js verfolgen soll, müssen vorhanden sein beobachtbar. Wir können die Eigenschaften unseres ViewModels beobachtbar machen, indem Sie personViewModel wie folgt ändern:
Accentsconagua
var personViewModel = firstName: ko.observable ("John"), Nachname: ko.observable ("Smith"); Statt direkt Werte zuzuweisen Vorname und Nachname, Wir verwenden ko.observable (), um die Eigenschaften zum automatischen Abhängigkeits-Tracker von Knockout.js hinzuzufügen. Wenn wir die Eigenschaft firstName ändern, sollte Knockout.js das HTML-Element entsprechend aktualisieren:
ko.applyBindings (personViewModel); personViewModel.firstName ("Ryan"); Sie haben wahrscheinlich bemerkt, dass Observables tatsächlich Funktionen und keine Variablen sind. Um den Wert eines Beobachtbaren zu erhalten, rufen Sie es ohne Argumente auf, und um den Wert festzulegen, übergeben Sie den Wert als Argument. Dieses Verhalten wird wie folgt zusammengefasst:
obj.firstName () anstelle von obj.firstName obj.firstName ("Mary") statt obj.firstName = "Mary" Die Anpassung an diese neuen Accessoren kann für Anfänger von Knockout.js etwas uninteressant sein. Seien Sie sehr vorsichtig, um nicht versehentlich einer beobachtbaren Eigenschaft mit dem Wert einen Wert zuzuweisen = Operator. Dadurch wird das Observable überschrieben, und Knockout.js stoppt die automatische Aktualisierung der Ansicht.
Unser generisches personViewModel object und seine beobachtbaren Eigenschaften funktionieren für dieses einfache Beispiel gut. Denken Sie jedoch daran, dass ViewModels auch Methoden für die Interaktion mit ihren Daten definieren kann. Aus diesem Grund werden ViewModels häufig als benutzerdefinierte Klassen anstelle von generischen JavaScript-Objekten definiert. Machen wir weiter und ersetzen Sie personViewModel durch ein benutzerdefiniertes Objekt:
function PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); ; ko.applyBindings (new PersonViewModel ()); Dies ist die kanonische Methode, ein ViewModel zu definieren und Knockout.js zu aktivieren. Jetzt können wir eine benutzerdefinierte Methode hinzufügen:
function PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); this.checkout = function () alert ("Auschecken versucht!"); ; ; Die Kombination von Daten und Methoden in einem einzigen Objekt ist eines der bestimmenden Merkmale des MVVM-Musters. Es bietet eine intuitive Möglichkeit, mit Daten zu interagieren. Wenn Sie zum Beispiel auschecken möchten, rufen Sie einfach an Auschecken() Methode auf dem ViewModel. Knockout.js stellt sogar Bindungen bereit, um dies direkt aus der Ansicht zu tun.
Der letzte Schritt in dieser Lektion besteht darin, einen Checkout-Button hinzuzufügen, um die Funktion aufzurufen Auschecken() Methode, die wir gerade definiert haben. Dies ist eine sehr kurze Einführung in die interaktiven Bindungen von Knockout.js, bietet jedoch einige nützliche Funktionen, die wir in der nächsten Lektion benötigen. Unter der
Tag, fügen Sie die folgende Schaltfläche hinzu:
Anstelle einer Textbindung, die den Wert einer Eigenschaft anzeigt, wird der klicken Die Bindung ruft eine Methode auf, wenn der Benutzer auf das Element klickt. In unserem Fall ruft es die checkout () -Methode unseres ViewModel auf, und es sollte eine Warnmeldung angezeigt werden.
Abbildung 11: Warnmeldung, die durch Klicken auf die Schaltfläche Checkout erstellt wird Die gesamte Suite interaktiver Bindungen von Knockout.js wird in Lektion 6 behandelt:.
Diese Lektion ging durch die Kernaspekte von Knockout.js. Wie wir gesehen haben, gibt es drei Schritte, um eine auf Knockout.js basierende Webanwendung einzurichten:
Das Binden von Ansichtselementen an beobachtbare Eigenschaften kann als Erstellen einer HTML-Vorlage für ein JavaScript-Objekt betrachtet werden. Nach dem Einrichten der Vorlage können Sie den HTML-Code vollständig vergessen und sich ausschließlich auf die ViewModel-Daten hinter der Anwendung konzentrieren. Das ist der springende Punkt von Knockout.js.
In der nächsten Lektion untersuchen wir die wirkliche Kraft des automatischen Abhängigkeits-Trackers von Knockout.js, indem wir Observables erstellen, die auf anderen Eigenschaften basieren, sowie beobachtbare Arrays, die Listen von Daten enthalten.
Diese Lektion repräsentiert ein Kapitel aus Knockout Prägnant, ein kostenloses eBook aus dem Team von Syncfusion.
