Aussehen Bindungen

Es ist auch erwähnenswert, dass Knockout.js Browserübergreifende Probleme im Hintergrund verwaltet. Für IE verwendet es die innerText Eigenschaft, und für Firefox und verwandte Browser wird textContent verwendet.

Das html Bindung

Das html Durch das Binden können Sie einen String als HTML-Markup rendern. Dies kann nützlich sein, wenn Sie Markup dynamisch in einem ViewModel generieren und in Ihrer Vorlage anzeigen möchten. Sie können beispielsweise ein berechnetes Observable definieren, das aufgerufen wird Formatname auf unserem Product-Objekt, das etwas HTML enthält:

 Funktion Produkt (Name, Preis, Tags, Rabatt) … this.formattedName = ko.computed (function () return ""+ this.name () +""; , diese); 

Dann können Sie den formatierten Namen mit dem Symbol rendern html Bindung:

Während dies das Ziel der Trennung von Inhalt und Darstellung verhindert, wird das html Das Binden kann sich als ein vielseitiges Werkzeug erweisen, wenn es sinnvoll eingesetzt wird.

Wann immer Sie dynamisches HTML rendern, ob über das html Binden oder ASP.NET - Stellen Sie immer sicher, dass das Markup überprüft wurde. Wenn Sie Inhalte anzeigen müssen, denen Sie nicht vertrauen können, sollten Sie die Text Bindung statt HTML.

Beachten Sie im vorherigen Ausschnitt auch das vorgestelltes Produkt ist ein beobachtbares Objekt, daher muss das zugrunde liegende Objekt mit einem leeren Funktionsaufruf referenziert werden, anstatt direkt mit featuresProduct.formattedName auf die Eigenschaft zuzugreifen. Auch dies ist ein häufiger Fehler für Anfänger von Knockout.js.

Das sichtbar Bindung

Ähnlich wie das ob und wenn nicht Bindungen: Mit der sichtbaren Bindung können Sie ein Element basierend auf bestimmten Bedingungen anzeigen oder ausblenden. Anstatt das Element jedoch vollständig aus dem DOM zu entfernen, fügt die sichtbare Bindung dem style-Attribut des Elements einfach eine display: none-Deklaration hinzu. Zum Beispiel können wir unsere bestehende Bindung für eine sichtbare Bindung ändern:

Das resultierende HTML für beide ob und das sichtbar Versionen werden im folgenden Codebeispiel gezeigt. In diesem Beispiel wird davon ausgegangen, dass die Bedingung als falsch ausgewertet wird:

     Sie haben gespeichert !!! 

Entscheidung, wann verwendet werden soll sichtbar gegen ob wird weitgehend durch den Kontext bestimmt. In diesem Fall ist es eigentlich besser, die if-Bindung zu verwenden, also die leere erstellt eine gleiche Anzahl von Spalten für jede Zeile.

Diese Bindung nimmt den gleichen Parameter wie die ob und ifnot Bindungen. Die Bedingung kann eine Eigenschaft Ihres ViewModel, ein JavaScript-Ausdruck oder eine Funktion sein, die einen Boolean zurückgibt.

Das css Bindung

Das css Durch die Bindung können Sie CSS-Klassen für HTML-Elemente basierend auf bestimmten Bedingungen definieren. Anstatt eine Bedingung als Parameter zu übernehmen, nimmt sie ein Objekt, das CSS-Klassennamen als Eigenschaftsnamen und Bedingungen für die Anwendung der Klasse als Werte enthält. Dies wird am besten mit einem Beispiel erklärt.

Angenommen, Sie möchten den Rabatt eines Produkts besonders hervorheben, wenn er um mehr als 15% reduziert ist. Eine Möglichkeit, dies zu tun, wäre das Hinzufügen von a css Bindung an die Meldung "Sie sparen __%" in der

Zunächst werden Sie feststellen, dass es möglich ist, mehrere Bindungen zu einer einzelnen hinzuzufügen Datenbindung Attribut, indem Sie sie durch Kommas trennen. Zweitens die css binding nimmt das Objekt supersaver: discount ()> .15 als Argument an. Dies ist wie eine Zuordnung, die definiert, wann dem Element eine CSS-Klasse hinzugefügt werden soll. In diesem Fall wird die Klasse .supersaver hinzugefügt, wenn der Rabatt des Produkts mehr als 15% beträgt, und wird ansonsten entfernt. Das eigentliche CSS, das die .supersaver-Regel definiert, kann an einer beliebigen Stelle der Seite definiert werden (d. H. Ein externes oder internes Stylesheet)..

 .supersaver font-size: 1.2em; Schriftdicke: fett; 

Wenn Sie dem zweiten Produkt einen Rabatt von 10% gewähren, sollten Sie unsere css-Bindung in Aktion sehen:

Die in der Eigenschaft des Objekts enthaltene Bedingung entspricht der ob, wenn nicht, und sichtbare Bindungsparameter. Dies kann eine Eigenschaft, ein JavaScript-Ausdruck oder eine Funktion sein.

Das Stil Bindung

Das Stil Bindung bietet die gleiche Funktionalität wie die css bindend, außer dass das Stilattribut des Elements bearbeitet wird, anstatt Klassen hinzuzufügen oder zu entfernen. Da Inline-Stile ein Schlüssel-Wert-Paar erfordern, unterscheidet sich auch die Syntax für den Parameter dieser Bindung geringfügig:

 Du hast gespeichert !!!

Wenn der Rabatt des Produkts mehr als 15% beträgt, wird dieses Element von Knockout.js wie folgt dargestellt:

Sie haben gespeichert !!!

Wenn es weniger als 15% ist, hat es eine Schriftgewicht von normal. Beachten Sie, dass die Stilbindung in Verbindung mit dem vorhandenen Stilattribut eines Elements verwendet werden kann. Das attr Bindung Das attr Mit der Bindung können Sie Attribute für ein HTML-Element mithilfe von ViewModel-Eigenschaften dynamisch definieren. Zum Beispiel, wenn unser Produkt Klasse hatte eine Permalink-Eigenschaft, wir könnten einen Link zu einzelnen Produktseiten erstellen mit: Details anzeigen Dies fügt ein href Attribut zum Tag, das auf das zeigt, was in der Permalink-Eigenschaft gespeichert ist. Wenn es sich bei Permalink um ein beobachtbares Element handelt, können Sie natürlich alle Vorteile der automatischen Abhängigkeitsverfolgung von Knockout.js nutzen. Da Permalinks typischerweise mit dem Datenobjekt in einem permanenten Speicher (z. B. einem Blogeintrag) gespeichert werden, kann das dynamische Erzeugen von Links auf diese Weise sehr bequem sein. Aber die attr Das Binden kann mehr als nur Links erstellen. Es lässt Sie hinzufügen irgendein Attribut zu einem HTML-Element. Dies eröffnet Ihnen alle Möglichkeiten, Ihre Knockout.js-Vorlagen in andere DOM-Bibliotheken zu integrieren. Zusammenfassung In dieser Lektion wurden die Erscheinungs-Bindungen von Knockout.js eingeführt. Viele dieser Bindungen ändern ein HTML-Element, wenn eine bestimmte Bedingung erfüllt ist. Das Definieren dieser Bedingungen direkt in der Bindung ist eine intuitive Methode zum Entwerfen von Vorlagen und hält den auf Ansicht zentrierten Code außerhalb des ViewModel. Denken Sie daran, dass es das Ziel von Knockout.js ist, sich auf die Daten hinter Ihrer Anwendung zu konzentrieren, indem Sie die Ansicht automatisch synchronisieren, sobald sich die Daten ändern. Sobald Sie Ihre Bindungen definiert haben, müssen Sie sich nie wieder um sie kümmern (es sei denn, Sie ändern natürlich die Struktur Ihres ViewModel).. Die in dieser Lektion vorgestellten Erscheinungsbild-Bindungen enthalten alle Werkzeuge, die Sie benötigen Anzeige Ihre Daten, aber sie lassen uns keine Benutzerinteraktion zu unseren Ansichtskomponenten hinzufügen. In der nächsten Lektion werfen wir einen Blick darauf, wie Knockout.js Formularfelder verwaltet. Diese Lektion repräsentiert ein Kapitel aus Knockout Prägnant, ein kostenloses eBook aus dem Team von Syncfusion. Code AppFog vs. Heroku Appcelerator Mit JSON einen Twitter-Client erstellen ×