Dieser Artikel wurde maschinell übersetzt.

Clienteinblicke

Integrierte Bindungen für HTML und JavaScript in Knockout

John Papa

K.o. bringt eine reiche Datenbindung Implementierung auf HTML5 und JavaScript Entwicklung.Sobald Sie das Konzept der Observablen erfassen, ist die einfachste Möglichkeit, in die Entwicklung mit Aussparung schieben, die Vielfalt der integrierten Bindungen zu verstehen, die er anbietet.Ko der integrierten Bindungen sind der einfachste Weg zu klopfen die Datenbindungsfunktionen und robusten Datenbindung zu viele Aspekte Ihrer HTML5-Anwendungen hinzufügen.Die vorherige Spalte Knockout eingeführt, behandelt die verschiedenen Arten von Observablen und die Kontrolle der Strömung integrierte Bindungen erforscht.Diesmal werde ich Eintauchen in Knockout der integrierten Bindungen.

Können Sie die neueste Version von Knockout (derzeit 2.0.0) aus bit.ly/scmtAi und verweisen sie in Ihrem Projekt, oder Sie können die NuGet Package Manager Visual Studio-Erweiterung (abrufbar unter bit.ly/dUeqlu), Knockout herunterzuladen.

Was sind die integrierten Bindungen in Ko?

Auf der grundlegendsten Ebene Datenbindung erforderlich ist, eine Bindungsquelle (z. B. ein JavaScript-Objekt) und ein Ziel zu binden (z. B. ein HTML-Element).Die Bindungsquelle wird häufig ein Ansichtsmodell bezeichnet.Das Target-Element möglicherweise mehrere Eigenschaften, so es wichtig ist zu wissen, welche Target-Eigenschaft zum Binden an, wie gut.Beispielsweise, wenn Sie Ihre Ansicht Modell FirstName-Eigenschaft in einem input-Tag Text binden möchten, würde der Knockout Wert Bindung binden möchten.In diesem Fall identifiziert Knockout die Target-Eigenschaft durch eine von seinen integrierten Bindungen: Wert.Knockout integrierten Bindungen ermöglichen es Ihnen, eine Bindung an Eigenschaften sowie Methoden des Modells anzeigen.Ko enthält viele integrierte Bindungen, die Ansicht Modelleigenschaften an Target-Elemente binden, wie ich in diesem Artikel erläutern werde.

Die Syntax für die Verwendung der integrierten Bindungen ist der Name des Knockout-Bindung und die Ansicht Modell Eigenschaft Paare innerhalb der binden-Eigenschaft eines HTML-Elements enthalten.Wenn Sie Daten möchten binden Sie an mehr als eine Eigenschaft in das HTML-Element, einfach separate Bindungen durch ein Komma verwenden diese Syntax:

data-bind="built-in-binding:viewmodel-property1, another-built-in-binding:viewmodel-property2"

Nach diesem Muster, könnte Sie das input-Element den Wert der Ansicht Modell Netto--Eigenschaft binden wie folgt:

<input type="text" data-bind="value:salePrice " />

Ko der integrierten Bindungen ermöglichen es Ihnen, die meisten Bindungsszenarien behandeln, aber wenn Sie eine spezielle Bindungsszenario, die ist nicht gedeckt auftreten, können Sie benutzerdefinierte Bindungen mit Aussparung, zu erstellen. Ich werde benutzerdefinierte Bindungen in einem späteren Artikel behandeln.

Grundlegende Bindungen: Text und html

Wir tauchen in Partnerarbeit, die die integrierten Bindungen bietet Knockout. Abbildung 1 zeigt dem Ansichtsmodell, dass alle Beispiele in diesem Artikel für ihre integrierten Bindungen verwenden. Die Beispieldaten für eine Gitarre ist, aber es ist nur um die Bindungen zu demonstrieren.

Abbildung 1 Ansichtsmodell mit Eigenschaften, die verschachtelte Kinder sowie Methoden

my.showroomViewModel = {
  id: ko.observable("123"),
  salePrice: ko.observable(1995),
  profit: ko.observable(-7250),
  rating: ko.observable(4),
  isInStock: ko.observable(true),
  model: {
          code: ko.observable("314ce"),
          name: ko.observable("Taylor 314 ce")
  },
  colors: ko.observableArray([
          { key: "BR", name: "brown" },
          { key: "BU", name: "blue" },
          { key: "BK", name: "black"}]),
  selectedColor: ko.observable(""),
  selectedColorsForDropdown: ko.observableArray([]),
  selectedColorForRadio: ko.observableArray(),
  allowEditing: ko.observable(true),
  isReadonly: ko.observable(true),
    onSalesFloor: ko.observable(true),
    qty: ko.observable(7),
  photoUrl: ko.observable("/images/314ce.png"),
  url: ko.observable("http://johnpapa.
net"),
  details: ko.observable("<strong><em>This guitar rocks!</em></strong>"),
  checkboxHasFocus: ko.observable(false),
  textboxHasFocus: ko.observable(false),
  buttonHasFocus: ko.observable(false),
  userInput: ko.observable(""),
  setFocusToCheckbox: function () {
          this.checkboxHasFocus(true);
  },
  displayValue: function () {
          if (this.userInput().length > 0) {
                  window.alert("You entered: " + this.userInput());
          }
  },
  detailsAreVisible: ko.observable(false),
  showDetails: function () {
          this.detailsAreVisible(true);
  },
  hideDetails: function () {
          this.detailsAreVisible(false);
  },
  useUniqueName: ko.observable(true)
};
ko.applyBindings(my.showroomViewModel);

Vielleicht ist die am häufigsten verwendete Bindung der Text-Bindung. Wenn Knockout eine Bindung der Text sieht, stellt er die InnerText-Eigenschaft für den Internet Explorer, oder die entsprechende Eigenschaft in anderen Browsern. Bei Verwendung von Textbindung wird der gesamte vorherige Text überschrieben. Die Text-Bindung wird häufig zum Anzeigen von Werten in einem Span oder div. In diesem Beispiel bindet das Ansichtsmodell model.code Eigenschaft an einen Zeitraum:

<span data-bind="text: model.code"></span>

Die html-Bindung ist nicht so oft verwendet, aber es ist sehr praktisch für das Rendern von HTML-Inhalten in Ihrem Modell anzeigen. Im folgenden Beispiel werden der Inhalt der html-Eigenschaft gerendert, den Text kursiv fett:

<tr>
  <td><div class="caption">html</div></td>
  <td><div data-bind="html: details"></div></td>
  <td><span>details: </span><span data-bind="text: details"></span></td>
</tr>

Sie sehen die Ergebnisse dieser Beispiele in Abbildung 2 (und alle Beispiele von die Seite 04-Builtin-bindings.html in der Beispielcode ausgeführt). Alle Beispiele zeigen die integrierten Bindung, das Ziel und die Quellwerte aus dem Ansichtsmodell.

Abbildung 2 die Knockout-Text und HTML-Bindungen

Wertbindung

Die Datenbindung ist wohl besonders für Anwendungen, die sehr interaktiv, sind, so es Sinn, dass die meisten der integrierten Bindungen in Knockout Hilfe Bind zu Eingabe- und Formular-Elemente, z. B. Textfelder, Kontrollkästchen und Dropdownlisten macht. Lassen Sie uns diese integrierten Bindungen durch den ersten Beweis die Vielseitigkeit der Knockout die Wertbindung.

Der Wert binden arbeitet mit vielen der HTML Eingabetypen binden eine Modelleigenschaft Blick direkt auf den Wert eines HTML-Eingabeelement, z. B. eine Textbox Checkbox oder ein Radio-Button. Das folgende Beispiel zeigt die Ansicht Modelleigenschaft model.code an ein TextBox-Steuerelement gebunden wird. Die Eigenschaft wird definiert mithilfe der Knockout beobachtbaren Funktion, wie es das Ziel zu benachrichtigen macht, wenn der Quellwert ändert:

<td><input type="text" data-bind="value: model.code"/></td>
<td><span>model.code: </span><span data-bind="text: model.code"></span></td>

Wenn ein Benutzer den Wert im Textfeld ändert, wird der neue Wert vom Ziel (Textbox) auf die Quelle (die Ansicht model.code Modelleigenschaft) gesendet wenn der Benutzer vom Textbox tabs. Jedoch auch können eine spezielle Knockout-Bindung Sie sagen, Knockout, vorbei an der Quelle auf jeden Tastenanschlag zu aktualisieren. Im nächsten Beispiel der Textbox-Wert an die Modelleigenschaft Netto-Ansicht gebunden ist und die ValueUpdate Bindung an Afterkeydown gebunden ist. ValueUpdate ist ein Parameter für die Wertbindung, die können Sie definieren, wenn die Wertbindung aktualisiert werden soll. Hier ist der Code sagen Knockout nach jedem Schlüssel nach unten drücken die Quelle aktualisieren (Sie können dieses Beispiel ausprobieren, indem Ausführen des Beispielcodes; die Ergebnisse werden angezeigt, Abbildung 3):

<td><input type="text" data-bind="value: salePrice, valueUpdate: 'afterkeydown'"/></td>
<td><span>salePrice: </span><span data-bind="text: salePrice"></span></td>

Abbildung 3 den Wert Bindung an Textfelder

Binden von Kontrollkästchen und Optionsfeldern

Checkboxen können Datenbindung an Knockout die Bindung überprüft werden. Die überprüfte Bindung sollte gebunden zu sein, eine Eigenschaft oder ein Ausdruck, der true oder false ergibt. Da die Modelleigenschaften Ansicht als Observablen definiert sind, wird das Kontrollkästchen aktualisiert, wenn die Source-Eigenschaft ändert. Ebenso, wenn ein Benutzer aktiviert oder das Kontrollkästchen deaktiviert, wird der Wert in der View-Modell-Eigenschaft aktualisiert. Das folgende Beispiel zeigt die Checkbox an die IsInStock-Eigenschaft gebunden wird (aus dem Ansichtsmodell in Abbildung 1; die Ergebnisse werden angezeigt, Abbildung 4):

<td><input type="checkbox" data-bind="checked: isInStock"/></td>
<td><span>isInStock: </span><span data-bind="text: isInStock"></span></td>

Abbildung 4 die überprüfte Bindung

Die überprüfte Bindung können Sie auch wählen ein Optionsfeld aus einer Gruppe von Optionsfeldern. Das folgende Beispiel zeigt eine Reihe von Optionsfeldern, deren Werte sind alle hartcodierten zu zwei-Buchstaben-Codes eine Farbe darstellt; Wenn ein Benutzer eine Farbe über das Optionsfeld auswählt, wird die checked-Eigenschaft festgelegt und die Modelleigenschaft SelectedColorForRadio Ansicht wird aktualisiert, um die zwei-Buchstaben-Wert:

<td>
  <input type="radio" value="BR" data-bind=
    "checked:  selectedColorForRadio" /><span>brown</span>
  <input type="radio" value="BU" data-bind=
    "checked: selectedColorForRadio" /><span>blue</span>
  <input type="radio" value="BK" data-bind=
    "checked: selectedColorForRadio" /><span>black</span>
</td>
<td><span>selectedColorForRadio: </span><span data-bind=
  "text: selectedColorForRadio"></span></td>

Während dies sehr gut funktioniert, finde ich es sinnvoller binden Sie die Liste der Farben zu einer Reihe von Radio-Buttons, die Sie tun können, durch die Kombination der drei integrierten Bindungen: der Wert, überprüft und Foreach. Das Ansichtsmodell in Abbildung 1 hat eine Farben-Eigenschaft, die ein Array von Objekten, jede Farbe Namen und einen Schlüsselwert enthalten ist. Die Foreach-Bindung im nächsten Beispiel durchläuft die Farben Array-Eigenschaft jedes Optionsfeld Wert binden an die Farbe der Key-Eigenschaft und eine Span-Text binden an die Name-Eigenschaft die Farbe festlegen:

<td>
  <div data-bind="foreach: colors">
    <input type="radio" data-bind=
      "value:key, checked: $parent.selectedColorForRadio" />
       <span data-bind="text: name"></span>
  </div>
</td>
<td><span>selectedColorForRadio: </span>
  <span data-bind="text: selectedColorForRadio"></span></td>

Das Optionsfeld aktiviert Bindung wird die Verwendung der $übergeordneten Funktion Ansicht Modell SelectedColorForRadio-Eigenschaft festgelegt. Die Bindung kann nicht jedoch einfach direkt an die Eigenschaft gebunden werden, weil die Foreach-Bindung im Kontext von das Ansichtsmodell in der Colors-Eigenschaft geändert. Um richtig an das Ansichtsmodell Eigenschaft zu binden, muss der Code im Kontext des übergeordneten (in diesem Fall das Ansichtsmodell selbst) zurückgreifen. Die Knockout $übergeordneten Funktion sagt Knockout, bis der Kontext-Hierarchie, eine Ebene zu verweisen, welche Daten die überprüfte Bindung an die View-Modell SelectedColorForRadio-Eigenschaft bindet. (Es gibt viele nützliche Funktionen und Tipps, wie dies, dass ich in Zukunft Artikel untersuchen werde.) Die Ergebnisse der in diesem Beispiel werden angezeigt, Abbildung 5.

Abbildung 5 die ausgecheckte und Wert Bindungen verwendet in Radio-Buttons

Bindung-Dropdown-Listen

Dropdown-Listen haben mehrere wichtige Eigenschaften, um eine Liste der Elemente zu laden, einen Wert anzeigen, verwenden Sie einen anderen Tastenwert und speichern die Auswahl des Benutzers. Ko bietet eine integrierte Bindung für jede dieser.

Die Optionen Bindung bezeichnet eine Liste von Werten angezeigt, in der Regel aus einer Arrayeigenschaft auf das Ansichtsmodell. Das Beispiel in diesem Abschnitt festgelegt die Optionen binden an die View-Modell Farben-Eigenschaft. Manchmal möchten Sie einen Wert in der Dropdown-Liste angezeigt, sondern verwenden Sie einen anderen Wert, wenn ein Benutzer ein Element aus der Liste auswählt. Ko des integrierten OptionsText und OptionsValue Bindungen helfen. Die OptionsText Bindung wird auf den Namen der Eigenschaft festgelegt, in der Dropdown-Liste aus den Optionen Bindung angezeigt. Die OptionsValue-Bindung ist auf den Namen der Eigenschaft zum Binden an den ausgewählten Wert des Elements in der Dropdown-Liste festgelegt. In diesem Beispiel enthält das Colors-Array Objekte mit einen Namen und eine Key-Eigenschaft, die der Namen für die OptionsText und den Schlüssel für die OptionsValue verwendet wird. Die Wertbindung wird der Ansicht Modell SelectedColor-Eigenschaft festgelegt in dem die Auswahl des Benutzers gespeichert werden:

<td>
  <div class="caption">options, value, optionsText, optionsValue</div>
  <div>select (single selection dropdowns)</div>
</td>
<td><select data-bind="options: colors, value: selectedColor,
   optionsText: 'name', optionsValue: 'key'" ></select></td>
<td><span>selectedColor: </span><span data-bind="text: selectedColor"></span></td>

Wenn Sie aus einer Dropdownliste Mehrfachauswahl zulassen möchten, fügen Sie zuerst die multiple-Eigenschaft für das HTML-Element auswählen.Dann ersetzen Sie die Knockout Winkelseite (singular) Bindung mit seiner SelectedOptions (plural) Bindung:

<td>
  <div class="caption">options, selectedOptions, optionsText, optionsValue</div>
  <div>select (multiple selection dropdowns)</div>
</td>
<td><select data-bind="options: colors,selectedOptions: selectedColorsForDropdown,
  optionsText: 'name', optionsValue: 'key'" multiple="multiple" ></select></td>
<td><span>selectedColorsForDropDown: </span><span data-bind=
  "text: selectedColorsForDropdown"></span></td>

Da das HTML-select Element ermöglicht es mehrere Auswahlmöglichkeiten, die View Model SelectedColorsForDropdown-Eigenschaft (die auf den integrierten SelectedOptions-Bindung festgelegt ist) enthält eine durch Trennzeichen getrennte Liste der Werte für die Auswahl.

Abbildung 6 zeigt die Ergebnisse der Auswahl der Farben blauen und schwarzen. Beachten Sie, dass der Dropdown-Liste den Namen der Farbe (blau und schwarz zeigt), aber verwenden Sie die Taste (BU und BK) als die ausgewählten Werte.

Abbildung 6 binden an Dropdown-Listen

Aktivieren und Deaktivieren von Input-Elemente

Ko bietet integrierte Bindungen zum Aktivieren und Deaktivieren von input-Elementen. Die Bindung aktivieren wird das input-Element aktivieren, wenn True ergibt, die Eigenschaft, an die, der es gebunden ist, und deaktiviert das Element, wenn es zu False ausgewertet wird. Die deaktivieren-Bindung ist das genaue Gegenteil:

<td>
  <input type="checkbox" data-bind="checked: allowEditing"/>
  <input type="text" data-bind="enable: allowEditing, value:salePrice" />
</td>
<td><span>allowEditing: </span><span data-bind="text: allowEditing"></span></td>

Dieser Beispielcode zeigt, dass der Kontrollkästchen Wert ist Datenbindung an die Ansicht Modell AllowEditing Eigenschaft, die auch an die Textbox gebunden ist Bindung aktivieren. So, wenn das Kontrollkästchen aktiviert ist, die Textbox aktiviert ist; Es ist nicht aktiviert, die Textbox ist deaktiviert.

Im Gegensatz dazu im nächste Beispiel wird veranschaulicht, wie die Checkbox aktiviert Datenbindung an die Ansicht Modell IsReadOnly-Eigenschaft gebunden ist und das Textfeld deaktivieren Bindung auf die IsReadOnly-Eigenschaft festgelegt ist. Also wenn das Kontrollkästchen aktiviert ist, die Textbox deaktiviert ist (die Ergebnisse der beiden Beispielen können man in Abbildung 7):

<td>
  <input type="checkbox" data-bind="checked: isReadonly"/>
  <input type="text" data-bind="disable: isReadonly, value:salePrice" />
</td>
<td><span>is readonly: </span><span data-bind="text: isReadonly"></span></td>

Abbildung 7 Bindungen zum Aktivieren und Deaktivieren von Elementen

Bindung im Fokus

Ko hat eine integrierte Bindung mit dem Namen Hasfocus, die bestimmt und legt fest, welches Element den Fokus besitzt. Hasfocus-Bindung ist praktisch, wenn Sie den Fokus auf ein bestimmtes Element in einem Formular festgelegt werden soll. Wenn die Bindung mit Werten, die True ergeben Hasfocus über mehrere Elemente verfügen, wird der Fokus auf das Element festgelegt, die seine Hasfocus legen die meisten vor kurzem hatte. Sie können die Hasfocus-Bindung an das Schlüsselwort true, um Verschiebung Fokus direkt auf ein Element festgelegt. Oder Sie können es an eine View-Modell-Eigenschaft binden, wie im Beispielcode in Abbildung 8.

Abbildung 8-Einstellung der Hasfocus-Bindung

<td>
  <input type="checkbox" data-bind="hasfocus: checkboxHasFocus"/>
  <input type="text" data-bind="hasfocus: textboxHasFocus"/>
  <button data-bind="click: setFocusToCheckbox, hasfocus:buttonHasFocus">
    set focus to checkbox</button>
  <br/>
  <span data-bind="visible: checkboxHasFocus">checkbox has focus</span>
  <span data-bind="visible: textboxHasFocus">textbox has focus</span>
  <span data-bind="visible: buttonHasFocus">button has focus</span>
</td>
<td>
  <span>checkboxHasFocus: </span><span data-bind="text: checkboxHasFocus">
    checkbox has focus</span>
  <br/>
  <span>textboxHasFocus: </span><span data-bind="text: textboxHasFocus">
    textbox has focus</span>
  <br/>
  <span>buttonHasFocus: </span><span data-bind="text: buttonHasFocus">
    button has focus</span>
</td>

Dieser Code legt die Hasfocus-Bindung für eine Checkbox, Textbox und ein Button-Element entsprechend für drei unterschiedliche Ansicht Modelleigenschaften. Wenn der Fokus auf eines dieser HTML-Elemente festgelegt ist, legt die entsprechende Hasfocus-Bindung die Modell-View-Eigenschaft auf True für das Element (und die anderen auf False). Sie können versuchen Sie in diesem Beispiel wird mit der herunterladbare Code, oder die Ergebnisse im Abbildung 9, wo ein Benutzer den Fokus im Textfeld platziert hat.

Abbildung 9 Bindung zum Festlegen des Fokus

Binden die Sichtbarkeit

Ko sichtbare Bindung sollte an eine Eigenschaft gebunden werden, der zu true oder false ausgewertet wird. Diese Bindung wird auf sichtbar, wenn das Element Darstellungsstil festgelegt True (wahr oder einen Wert ungleich Null), oder none, wenn falsch (false, 0, nicht definiert oder null).

Das nächste Beispiel zeigt die Kontrollkästchen aktiviert und die Textbox sichtbar Bindung, die beide auf die View-Modell OnSalesFloor-Eigenschaft festgelegt. Wenn das Kontrollkästchen aktiviert ist, die OnSalesFloor-Eigenschaft ist auf True festgelegt und die Textbox wird sichtbar. Wenn das Kontrollkästchen deaktiviert ist, die OnSalesFloor-Eigenschaft auf False festgelegt ist und das Textfeld nicht mehr sichtbar ist (siehe Abbildung 10):

<td>
  <input type="checkbox" data-bind="checked: onSalesFloor"/>
  <input type="text" data-bind="visible: onSalesFloor, value:qty" />
</td>
<td>
  <span>onSalesFloor: </span><span data-bind="text: onSalesFloor"></span>
</td>

Abbildung 10 verbindlich für die Sichtbarkeit

Ereignisbindungen

K.o. unterstützt die Bindung an jedes Ereignis durch seine integrierten Ereignisbindung, aber es hat auch zwei spezielle integrierte Bindungen für klicken und einreichen. Klicken Sie auf Bindung sollte auf ein Element verwendet werden, wenn Sie das Click-Ereignis eine Methode in einer Ansichtsmodell binden möchten. Es wird am häufigsten verwendet, mit einer Taste, Eingabe oder eine ein-Element, sondern kann mit jedem HTML-Element verwendet werden.

Der folgende Code legt die Bindung an die DisplayValue-Methode auf das Ansichtsmodell auf einen Button; in Abbildung 1, Sie können sehen, dass die DisplayValue-Methode auf das Ansichtsmodell einfach die Ansicht Modell UserInput Eigenschaft angezeigt (die an die Textbox gebunden ist) mit einer Warnung:

<td>
  <input type="text" data-bind="value: userInput"/>
  <button data-bind="click: displayValue">display value</button>
</td>
<td>
  <span>userInput: </span><span data-bind="text: userInput"></span>
</td>

Wenn Sie eine View-Modell-Methode auf ein Ereignis außer Klick binden möchten, können Sie die Knockout Ereignisbindung verwenden. Da die Bindung klicken Sie auf die am häufigsten verwendeten Bindung für Veranstaltungen ist, ist es einfach eine Verknüpfung zu die Ereignisbindung.

Ko der Ereignisbindung können Sie auf jedes Ereignis zu binden. Um Ereignisbindung verwenden, übergeben Sie ein Objekt literal enthält Name-Wert-Paare für den Ereignisnamen und die View-Modell-Methode, durch Kommas getrennt. Der folgende Beispielcode legt Knockout des integrierten Ereignisbindung, damit das Mouseover und Mouseout-Ereignis an die Methoden ShowDetails und HideDetails auf das Ansichtsmodell gebunden sind. Diese Methoden legen die Ansicht Modell beobachtbaren Eigenschaft DetailsAreVisible auf true oder false, entsprechend:

<td>
  <div data-bind="text:model.code, event: {mouseover: showDetails,
    mouseout: hideDetails}"></div>
  <div data-bind="visible: detailsAreVisible" style="background-color: yellow">
    <div data-bind="text:model.
name"></div>
    <div data-bind="text:salePrice"></div>
  </div>
</td>
<td>
  <span>detailsAreVisible: </span><span data-bind="text: detailsAreVisible"></span>
</td>

Das zweite Div-Tag legt die sichtbare Bindung für das Modelldetails anzeigen­AreVisible Eigenschaft, so dass wenn der Benutzer die Maus über das erste div-Tag bewegt, das zweite Div sichtbar wird. Wenn die Maus das erste div-Tag verschoben wird, ist das zweite Div-Tag nicht mehr sichtbar. Die Ergebnisse werden angezeigt, Abbildung 11. Die Absenden-Bindung (nicht dargestellt in Figure11) akzeptiert jede Eingabe Stiftbewegung, die ein HTML-Formular gesendet wird.

Abbildung 11 das Klicken und Ereignisbindungen

Stil-Bindungen

Sie können Stile mit Aussparung mit der Css und der Stil integrierte Bindungen binden. Die Css-Bindung kann festgelegt werden, um eine oder mehr gültige Css Klasse Namen. Das folgende Beispiel zeigt, dass die Textbox den Satz an die View Model Gewinn-Eigenschaft und seine Css Satz an ein Objektliteral binden Binden Wert hat. Das literal-Objekt enthält einen oder mehrere Css-Klasse Namen zuweisen und einen entsprechenden Ausdruck, der zu true oder false ausgewertet werden sollten:

<td>
  <input data-bind="value:profit, css: {negative: profit() < 0,
    positive: !(profit() < 0), }"/>
</td>
<td>
  <span>profit < 0: </span><span data-bind="text: profit() < 0 ?
'negative' : 'positive'"></span>
</td>

Beispielsweise ergibt die Gewinn-Eigenschaft kleiner als 0, wird die Css-Klasse benannten negativen angewendet werden. Ebenso wird der zweite Ausdruck ausgewertet, und wenn es wahr ist, wird die Css-Klasse namens Positive angewendet werden.

Während ich empfehlen die Verwendung von Css-Klassen, wann immer möglich, können manchmal Sie auch einen bestimmten Stil festlegen. K.o. unterstützt dies mit seiner integrierten Bindung Stil. Im folgenden Beispiel die Textbox-Farbe wechselt zu rot, wenn der Gewinn weniger als 0, und grün ist, ist das Ergebnis größer als 0 (die Ergebnisse für die Css und Stil Bindungen werden dargestellt Abbildung 12):

<td>
  <input data-bind="value:profit, style: {color: profit() < 0 ? '
red' :
    'green'}"></input>
</td>
<td>
  <span>profit < 0: </span><span data-bind="text: profit() < 0 ? '
red' :
    'green'"></span>
</td>

Abbildung 12 Stil Bindungen

Bindung zu anderen HTML-Attribute

Während Knockout viele integrierte Bindungen hat, treffen Sie sicherlich einige Situationen, für die es keine gibt. In diesen Fällen bietet Knockout die Attr integrierten Bindung, die erlaubt, dass Sie auf Daten jedes Attribut eine Ansicht-Eigenschaft binden. Dies ist sehr nützlich in vielen Szenarien, z. B. das Binden der Href und Titel der ein Element:

<td>
  <a data-bind="attr: {href: url, title: model.
name}, text:model.code"></a>
</td>
<td><span>url: </span><span data-bind="text: url"></span></td>

Eine weitere gebräuchliche Anwendung für die Attr-Bindung ist, machen das Img-Element, dessen Src-Attribut an die View-Modell PhotoUrl-Eigenschaft zu binden (sehen Sie die Ergebnisse der beide Proben in Abbildung 13):

<td>
  <img data-bind="attr: {src: photoUrl, alt: model.code}" class="photoThumbnail"/>
</td>
<td><span>photoUrl: </span><span data-bind="text: photoUrl"></span></td>

Abbildung 13 binden an Elementattribute

Nachbereitung

Dieser Artikel untersucht viele der integrierten Bindungen, die Knockout anbietet. Es gibt ein paar andere, vor allem der Vorlagenbindung, die ich in einem zukünftigen Artikel behandelt werden. Die Konzepte sind in jedem Fall identisch. Bestimmen Sie die Binding-Eigenschaft, die Sie verwenden möchten auf das Target-Element und das Modell Ansichtselement, das Sie binden möchten. Sobald Sie Knockout der Observablen und seine Vielzahl von integrierten Bindungen zu erfassen, müssen Sie die grundlegenden Bausteine robuste Web-Anwendungen mit dem Model-View-ViewModel oder MVVM, Muster zu erstellen.

John Papa ist ein ehemaliger Microsoft-Experte in den Silverlight- and Windows 8-Teams und hat die beliebte Silverlight-TV-Sendung moderiert. Er hat weltweit bei Keynotes und Sessions für Konferenzen wie z. B. BUILD, MIX, Professional Developers Conference, Tech ·ED, Visual Studio Live! und DevConnections. Darüber hinaus schreibt John Papa Beiträge für das Visual Studio Magazine ("Papa's Perspective") und ist Autor von Schulungsvideos bei Pluralsight. Sie können ihm auf Twitter unter twitter.com/john_papa folgen.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Steve Sanderson