Accentsconagua

Kontrollflussbindung

Code
Share

Wie Sie bereits in früheren Lektionen gesehen haben, ist das Entwerfen einer Ansicht für ein ViewModel wie das Erstellen einer HTML-Vorlage für ein JavaScript-Objekt. Ein wesentlicher Bestandteil eines Templating-Systems ist die Möglichkeit, den Ablauf der Vorlagenausführung zu steuern. Durch die Möglichkeit, Listen von Daten zu durchlaufen und visuelle Elemente basierend auf bestimmten Bedingungen ein- oder auszuschließen, können Markierungen minimiert werden, und Sie haben die vollständige Kontrolle über die Anzeige Ihrer Daten.

Wir haben schon gesehen, wie das für jeden Die Bindung kann durch ein beobachtbares Array durchlaufen werden, Knockout.js enthält jedoch auch zwei logische Bindungen: ob und wenn nicht. Darüber hinaus können Sie mit dem Binding den Umfang der Vorlagenblöcke manuell ändern.

In dieser Lektion werden die Steuerflussbindungen von Knockout.js eingeführt, indem das Warenkorb-Beispiel aus der vorherigen Lektion erweitert wird. Wir werden auch einige Nuancen von erforschen für jeden das wurden in der letzten Lektion beschönigt.

Das für jeden Bindung

Beginnen wir mit einem näheren Blick auf unser Bestehendes für jeden Schleife:

Wenn Knockout.js aufeinander trifft für jeden in dem Datenbindung Attribut durchläuft es das shoppingCart-Array und verwendet jedes gefundene Element für das verbindlicher Kontext des enthaltenen Markups. In diesem Bindungskontext verwaltet Knockout.js den Gültigkeitsbereich von Schleifen. In diesem Fall können wir daher die Namen und Preiseigenschaften verwenden, ohne auf eine Instanz des Produkts zu verweisen.

Mit Bindungskontexten arbeiten

Die Verwendung jedes Elements in einem Array als neuer Bindungskontext ist eine bequeme Methode zum Erstellen von Schleifen. Dieses Verhalten macht es jedoch auch unmöglich, auf Objekte außerhalb des aktuellen Elements in der Iteration zu verweisen. Aus diesem Grund stellt Knockout.js in jedem Bindungskontext mehrere spezielle Eigenschaften zur Verfügung. Beachten Sie, dass alle diese Eigenschaften nur in verfügbar sind Aussicht, nicht das ViewModel.

Das $ root Eigentum

Das $ root context bezieht sich immer auf das ViewModel der obersten Ebene, unabhängig von Schleifen oder anderen Änderungen des Bereichs. Wie wir in der vorherigen Lektion gesehen haben, können Sie damit auf Methoden auf oberster Ebene zugreifen, um das ViewModel zu bearbeiten.

Das $ data Eigentum

Das $ data Die Eigenschaft in einem Bindungskontext bezieht sich auf das ViewModel-Objekt für den aktuellen Kontext. Es ist sehr ähnlich diese Schlüsselwort in einem JavaScript-Objekt. Zum Beispiel bezieht sich $ data innerhalb unserer foreach: shoppingCart-Schleife auf das aktuelle Listenelement. Der folgende Code funktioniert daher genauso wie ohne die Verwendung von $ data:

Dies mag wie eine triviale Eigenschaft erscheinen, ist jedoch unverzichtbar, wenn Sie Arrays durchlaufen, die atomare Werte wie Strings oder Zahlen enthalten. Zum Beispiel können wir eine Liste von Strings speichern, die Tags für jedes Produkt darstellen:

 Funktion Produkt (Name, Preis, Tags) this.name = ko.observable (name); this.price = ko.observable (price); tags = typeof (tags)! == 'undefined'? Stichworte : []; this.tags = ko.observableArray (Tags);

Definieren Sie dann einige Tags für eines der Produkte in der Einkaufswagen Array:

 neues Produkt ("Brötchen", 1.49, ["Backwaren", "Hot Dogs]]);

Jetzt können wir den $ data-Kontext in Aktion sehen. In dem

mit unseren Warenkorb-Artikeln, fügen Sie ein
Element mit einem
    Liste durchlaufen Stichworte Array:

Innerhalb der foreach: tags Schleife, Knockout.js verwendet die eingebauten Zeichenfolgen "Backwaren" und "Hot Dogs" als Bindungskontext. Aber da wir auf die eigentlichen Zeichenfolgen statt auf ihre zugreifen wollen Eigenschaften, Wir brauchen das $ -Datenobjekt.

Das $ index Eigentum

Innerhalb eines für jeden Schleife, die $ index Diese Eigenschaft enthält den Index des aktuellen Elements im Array. Wie bei den meisten Dingen in Knockout.js wird der Wert von $ index automatisch aktualisiert, wenn Sie ein Element aus dem zugeordneten beobachtbaren Array hinzufügen oder daraus löschen. Dies ist eine nützliche Eigenschaft, wenn Sie den Index jedes Elements anzeigen möchten.

Das $ parent Eigentum

Das $ parent Diese Eigenschaft bezieht sich auf das übergeordnete ViewModel-Objekt. Normalerweise benötigen Sie dies nur, wenn Sie mit verschachtelten Schleifen arbeiten und auf Eigenschaften in der äußeren Schleife zugreifen müssen. Zum Beispiel, wenn Sie auf die zugreifen müssen Produkt Instanz aus dem Inneren der foreach: tags-Schleife können Sie die $ parent -Eigenschaft verwenden:

 
     
  •   -  
    •

Zwischen beobachtbaren Arrays ist das für jeden Sie sollten über alle Werkzeuge verfügen, die Sie benötigen, um Arrays in Ihren Webanwendungen von Knockout.js zu nutzen.

Reduzierte Produkte

Bevor wir mit den bedingten Bindungen fortfahren, fügen wir ein Rabatt Eigentum an unserer Produktklasse:

 Funktion Produkt (Name, Preis, Tags, Rabatt) … Rabatt = Typus (Rabatt)! == 'undefined'? Rabatt: 0; this.discount = ko.observable (Rabatt); this.formattedDiscount = ko.computed (function () return (this.discount () * 100) + "%";, this);

Dies gibt uns eine Bedingung, die wir mit den logischen Bindungen von Knockout.js überprüfen können. Zuerst machen wir das Rabatt Optionaler Parameter, der einen Standardwert von 0 ergibt. Dann erstellen wir eine Beobachtungsmöglichkeit für den Rabatt, damit Knockout.js die Änderungen nachverfolgen kann. Schließlich definieren wir ein berechnetes Observable, das eine benutzerfreundliche Version des Rabattprozentsatzes zurückgibt.

Lassen Sie uns fortfahren und dem ersten Artikel in 20% Rabatt hinzufügen PersonViewModel.shoppingCart:

 this.shoppingCart = ko.observableArray ([neues Produkt ("Bier", 10.99, null, .20), neues Produkt ("Brats", 7.99), neues Produkt ("Brötchen", 1.49, ["Backwaren", " Hot Dogs]);]);

Das wenn und falls nicht Bindungen

Das ob Bindung ist eine bedingte Bindung. Wenn der übergebene Parameter mit true ausgewertet wird, wird der enthaltene HTML-Code angezeigt, andernfalls wird er aus dem DOM entfernt. Versuchen Sie beispielsweise, der Zelle die folgende Zelle hinzuzufügen

mit den Warenkorb-Artikeln direkt vor dem Button "Entfernen".

Alles im Inneren

Sie haben gespeichert !!! Das Element wird nur für Artikel angezeigt, deren Rabatt größer als ist 0. Da es sich bei Rabatt um einen beobachtbaren Wert handelt, bewertet Knockout.js die Bedingung automatisch neu, wenn sich Änderungen ergeben. Auf diese Weise können Sie sich mit Knockout.js auf die Daten konzentrieren, die Ihre Anwendung steuern.

Abbildung 15: Bedingter Rabatt für jedes Produkt

Sie können verwenden irgendein JavaScript-Ausdruck als Bedingung: Knockout.js versucht, die Zeichenfolge als JavaScript-Code auszuwerten, und das Ergebnis wird zum Anzeigen oder Ausblenden des Elements verwendet. Wie du vielleicht erraten hast, das wenn nicht Die Bindung negiert einfach den Ausdruck.

Das mit Bindung

Das mit Über die Bindung kann der Gültigkeitsbereich eines bestimmten Blocks manuell angegeben werden. Fügen Sie den folgenden Ausschnitt vor den Schaltflächen "Checkout" und "Bier hinzufügen" oben in der Ansicht hinzu:

 
 Brauchst du ? 
 Holen Sie sich jetzt eine für nur .

Innerhalb der mit Block, den Knockout.js verwendet PersonViewModel.featuredProduct als verbindlicher Kontext. Der Text: Name und Text: Preisbindungen funktionieren also wie erwartet ohne einen Verweis auf das übergeordnete Objekt.

Damit der vorherige HTML-Code funktioniert, müssen Sie natürlich a definieren vorgestelltes Produkt Eigenschaft auf PersonViewModel:

 var featured = neues Produkt ("Acme BBQ Sauce", 3.99); this.featuredProduct = ko.observable (vorgestellten);

Zusammenfassung

Diese Lektion präsentierte die für jeden, ob, Wenn nicht, und mit Bindungen. Diese Steuerflussbindungen geben Ihnen die vollständige Kontrolle darüber, wie Ihr ViewModel in einer Ansicht angezeigt wird.

Es ist wichtig, die Beziehung zwischen den Knockout.js-Bindungen und den Observablen zu erkennen. Technisch gesehen sind die beiden völlig unabhängig. Wie wir am Anfang dieser Serie gesehen haben, können Sie ein normales Objekt mit nativen JavaScript-Eigenschaften verwenden (d. H. nicht observables) als ViewModel und Knockout.js werden die Bindungen der Ansicht korrekt darstellen. Knockout.js verarbeitet die Vorlage jedoch nur beim ersten Mal - ohne Observable. Die Ansicht kann nicht automatisch aktualisiert werden, wenn sich die zugrunde liegenden Daten ändern. Da dies der Kern von Knockout.js ist, sehen Sie normalerweise Bindungen beobachtbar Eigenschaften wie unsere foreach: shoppingCart verbindlich in den vorherigen Beispielen.

Nun, da wir die Logik hinter unseren Ansichtsvorlagen steuern können, können wir das Erscheinungsbild einzelner HTML-Elemente steuern. Die nächste Lektion befasst sich mit dem lustigen Teil von Knockout.js: Aussehensbindungen.

Diese Lektion repräsentiert ein Kapitel aus Knockout Prägnant, ein kostenloses eBook aus dem Team von Syncfusion.

Code
×