Schnellstart: Binden von Daten und Stilen (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Sie können mit der Bindung in der Windows-Bibliothek für JavaScript Daten und Stile an HTML-Elemente binden. Bindungen mit WinJS funktionieren standardmäßig nur in eine Richtung. Dies bedeutet, dass das HTML-Element aktualisiert wird, wenn Daten- und Stilwerte geändert werden, Daten jedoch nicht aktualisiert werden, wenn sich HTML-Werte ändern. In dieser Schnellstartanleitung wird die einfachste Art der Bindung vorgestellt. Dabei handelt es sich um eine deklarative Bindung an ein einfaches Objekt, das nur Daten enthält. Informationen zu komplexeren Bildungsformen finden Sie in Binden von komplexen Objekten und Binden von Daten mit Vorlagen.

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können. Anweisungen zum Erstellen der ersten App finden Sie unter Erstellen Ihrer ersten App mit JavaScript.

Einrichten eines Bindungsprojekts

Führen Sie die folgenden Schritte aus, um ein Projekt für die Bindung einzurichten.

Erstellen Sie eine neue leere Windows-Runtime-App mit JavaScript, und weisen Sie ihr den Namen BindingApp zu.
Fügen Sie in "default.html" ein DIV-Element für die Bindung hinzu, und fügen Sie ihr die ID "basicBinding" und den internenText Welcome wie folgt hinzu:
```
<body>
    <div id="basicBinding">
      Welcome
    </div>
</body>
```

Binden von Daten

Sie können alle Arten von Daten an ein HTML-Element binden, aber zu Demonstrationszwecken wird hier nur ein person-Objekt mit einem Feld für einen Vornamen eingerichtet.

Warnung Versuchen Sie nicht, Daten an die ID eines HTML-Elements zu binden.

Fügen Sie in "default.js" die folgende Codezeile in der sofort aufgerufenen Funktion direkt nach der use strict-Direktive ein.

(function () {
    "use strict";

    // Create a 'person' object.
    var person = { name: "Fran" };

    // Other app set-up code.
})();

Fügen Sie im DIV-Element ein SPAN-Element hinzu, das auf das person.name-Feld zugreift.

<div id="basicBinding">
    Welcome, 
    <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

Sie müssen WinJS.Binding.processAll aufrufen, damit der Name angezeigt wird. WinJS.Binding.processAll sucht das data-win-bind-Attribut im angegebenen Element und durchsucht dann alle Nachfolgerelemente dieses Elements. Der zweite Parameter von WinJS.Binding.processAll stellt den Datenkontext zum Einfügen in das angegebene Element bereit. Fügen Sie den folgenden Code im app.onactivated-Ereignishandler in "default.js" hinzu.
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}
```
Wenn Sie das Projekt erstellen und debuggen, sollte Folgendes angezeigt werden:

Welcome, Fran
Dies wird im folgenden Codefragment veranschaulicht:
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
```
- Das Bindungssystem WinJS verwendet eine sichtbare Ebene zum Weitergeben von Änderungsbenachrichtigungen.
- Wenn Sie ein Datenobjekt als Datenkontext an processAll übergeben, wird es in einen WinJS.Binding.as-Aufruf eingeschlossen, der einen Observable-Proxy für dieses Objekt erstellt oder mit einem bereits erstellten Proxy zusammentrifft.
- Alle „Schreibvorgänge“ (d. h. Eigenschaftensätze), für die Sie Benachrichtigungen auslösen möchten, müssen diese Proxyschicht passieren. Sie können später über WinJS.Binding.as mit dem Observable-Proxy zusammentreffen.
- Die einfachste Methode besteht meistens darin, diesen Observable-Proxy als Objekt zum Lesen und Schreiben von Daten zu verwenden.
- Die einmalige Bindung liegt vor, wenn Sie das Standardverhalten (z. B. WinJS.Binding.oneTime) mithilfe eines Bindungsinitialisierers überschreiben oder versuchen, eine Bindung an nicht erweiterbare Objekte (z. B. fixierte oder von WinRT projizierte Objekte) vorzunehmen.
Um zu zeigen, was geschieht, wenn die zugrunde liegenden Daten geändert werden, verwenden wir einfach eine Schaltfläche, um das Abrufen von Daten aus einem anderen Prozess oder aus einem internen Datenspeicher zu simulieren. Fügen Sie "default.html" unter dem DIV-Element ein BUTTON-Element hinzu.
```
<button id="btnGetName">Get name</button>
```

Fügen Sie eine Pseudomethode hinzu, die das Abrufen der Daten simuliert. In diesem Fall wird der Name aus einem Array mit einem zufälligen Index abgerufen. Fügen Sie in "default.js" den folgenden Code zum app.onactivated-Ereignishandler hinzu, der das Klickereignis der Schaltfläche behandelt.

document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray);
    }

var nameArray =
        new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");

function getName(source, nameArray) {
    source.name = nameArray[randomizeValue()];
}

function randomizeValue() {
    var value = Math.floor((Math.random() * 1000) % 8);
    if (value < 0)
        value = 0;
    else if (value > 9)
        value = 9;
    return value;
}

Erstellen und debuggen Sie die App, um diesen Code zu testen. Nun sollte jedes Mal, wenn Sie auf die Schaltfläche Get name klicken, ein anderer Name angezeigt werden.

Binden eines Stils

Als nächstes binden wir die Hintergrundfarbe des SPAN-Elements.

Fügen Sie in "default.html" einen style.background-Wert zum data-win-bind-Attribut hinzu, und legen Sie die Bindung auf das Farbfeld des Personenobjekts fest.
```
<div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>
```
Fügen Sie dem Personenobjekt in "default.js" ein Farbfeld hinzu.

Tipp Die linke Seite des bindenden Ausdrucks ist eine Eigenschaft eines Elements und seiner untergeordneten Eigenschaften mit JavaScript-Syntax (die zur programmatischen Zuweisung verwendet werden würde).
```
var person = { name: "Fran", color: "red" };
```

Fügen Sie außerdem in "default.js" im app.onactivated-Ereignishandler ein zweites Array mit Farben hinzu, und ändern Sie die getName-Funktion so, dass sie die Farbe des Namens aktualisiert.

var colorArray =
    new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue","lightgreen", "lightyellow");

function getName(source, nameArray, colorArray) {
    source.name = nameArray[randomizeValue()];
    source.color = colorArray[randomizeValue()];
    }

Denken Sie daran, den getName-Aufruf im Klickereignishandler für die Schaltfläche zu ändern.

document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray, colorArray);
    }

Wenn Sie die App erstellen und debuggen, sollten Sie sehen, dass durch Klicken auf die Schaltfläche Get name Name und Farbe des Namens aktualisiert werden.

Zusammenfassung und nächste Schritte

In diesem Schnellstart wurde gezeigt, wie Sie ein einfaches JavaScript-Objekt an ein HTML-Span-Element binden.

Informationen zum Binden komplexerer Objekte finden Sie unter Binden von komplexen Objekten. Wenn Sie mehrere Objekte mit einer Vorlage binden möchten, finden Sie weitere Informationen unter Binden von Daten mit Vorlagen.

Share via