So wird’s gemacht: Binden eines komplexen Objekts (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]

Häufig möchten Sie, dass Ihre App an komplexe Objekte gebunden wird, insbesondere an solche Objekte, die Prozesse verwalten und nicht von der UI der App kontrolliert werden. In diesem Thema erfahren Sie, wie Sie eine App schreiben, die Daten aus einem Objekt anzeigt, das einen Namen und eine Farbe enthält. Dies ist im Wesentlichen dasselbe wie Schnellstart: Binden von Daten und Stilen. In diesem Fall verwaltet das Objekt den Änderungsprozess jedoch selbst, anstatt auf eine Schaltfläche zu reagieren, durch die die Änderung ausgelöst wird.

Voraussetzungen

Das Thema Schnellstart: Binden von Daten und Stilen an HTML-Elemente kann Ihnen dabei helfen, die einzelnen Schritte in dieser Anleitung auszuführen.

Anweisungen

Schritt 1: Einrichten eines Projekts zur Verwendung einer Bindung

Erstellen Sie eine leere Windows-Runtime-App mit JavaScript, und geben Sie ihr den Namen ObjectBinding.
Fügen Sie in "default.html" ein DIV-Element für die Bindung hinzu, und fügen Sie ihr die ID "objectBinding", den internen Text Welcome und ein SPAN-Element mit der ID "bindableSpan" wie folgt hinzu:
```
<body>
    <div id="objectBinding">
      Welcome
      <span id="bindableSpan"></span>
    </div>
</body>
```

Schritt 2: Einrichten eines komplexen Objekts

Definieren Sie ein Person-Objekt, das über Felder für Name und Farbe, ein Array an Namen, ein Array an Farbnamen und eine private Methode verfügt, um einen zufälligen Index für das Array bereitzustellen. Für die Definition dieses Objekts können Sie die WinJS.Class.define-Methode verwenden. Fügen Sie diesen Code in der sofort aufgerufenen anonymen Funktion in "default.js" hinzu.


(function () {
    "use strict";

    // Other app code ...

    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

        _nameArray:
            ["Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"],
        _colorArray:
            ["lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"],

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue(this._nameArray.length)];
            this.color = this._colorArray[this._randomizeValue(this._colorArray.length)];
        },
        _randomizeValue: function (max) {
            return Math.floor(Math.random() * 1000) % max); 
        }
    });

})();

Fügen Sie nun der Person-Definition (das zweite an WinJS.Class.define übergebene Argument) zwei öffentliche Methoden hinzu, die einen Prozess starten und anhalten, der die Felder für Name und Farbe alle 500 Millisekunden ändert. Hier sehen Sie den vollständigen Aufruf von WinJS.Class.define:


(function () {
    "use strict";

    // Other app code ...

    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

        _nameArray:
            ["Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"],
        _colorArray:
            ["lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"],

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue(this._nameArray.length)];
            this.color = this._colorArray[this._randomizeValue(this._colorArray.length)];
        },
        _randomizeValue: function (max) {
            return Math.floor(Math.random() * 1000) % max); 
        },

        // Starts the process that changes the name.
        start: function () {
            var that = this;
            if (this.timeout === null) {
                this.timeout = setInterval(function () { that._newName(); }, 500);
            }
        }, 

        // Stops the process that changes the name.
        stop: function () {
            if (this.timeout !== null) {
            clearInterval(this.timeout);
                this.timeout = null;
            }
        }
    });

})();

Schritt 3: Binden des Objekts an den HTML-Code

Derzeit ist das Person-Objekt nicht feststellbar, d. h., es übermittelt bei einer Änderung keine Benachrichtigung. Das Objekt kann feststellbar werden, indem das Person-Objekt mit der richtigen Bindungsfunktion kombiniert wird. Die WinJS.Class.mix-Funktion fügt dem Person-Objekt die Funktion des WinJS.Binding.mixin-Objekts, das eine bind-Methode beinhaltet, und die Funktionalität der WinJS.Binding.expandProperties-Funktion hinzu, die Objekteigenschaften für die Bindung erstellt. Rufen Sie WinJS.Class.mix nach der Person-Objektdefinition auf. (Sie müssen die Klasse "Person" definieren, bevor Sie mit ihr arbeiten können.)
```
WinJS.Class.mix(Person,
    WinJS.Binding.mixin,
    WinJS.Binding.expandProperties({name: "", color: ""})
); 
```
Sie müssen auch _initObservable innerhalb des Person-Konstruktors aufrufen, um die _backingData-Eigenschaft einzurichten. Ändern Sie den Person-Konstruktor wie folgt:
```
...
function () {
    this._initObservable();

    this.name = "Harry";
    this.color = "blue";
    this.timeout = null;
    }
...
```
Nach dem Instanziieren eines Person-Objekts können Sie dieses an die beiden Eigenschaften binden. Die bind-Methode übernimmt zwei Parameter: den Namen der Eigenschaft oder des Felds, die bzw. das gebunden werden soll, und eine Funktion, die angibt, wie sie oder es gebunden wird. Diese Funktion verfügt über zwei Parameter: den neuen Wert und den alten Wert. Da bind eine Instanzmethode ist, wird zunächst lediglich eine Person instanziiert und bind für die Felder für Name und Farbe aufgerufen. Fügen Sie den folgenden Code im app.onactivated-Ereignishandler in "default.js" hinzu.
```
app.onactivated = function (args) {

    // Other activation code ...

    var myPerson = new Person();

    myPerson.bind("name", onNameChange);

    myPerson.bind("color", onColorChange);

    function onNameChange (newValue) {
        var span = document.getElementById("bindableSpan");
        span.innerText = newValue;
    }

    function onColorChange (newValue) {
        var span = document.getElementById("bindableSpan");
        span.style.color = newValue;
    }
}
```
Warnung Versuchen Sie nicht, Daten an die ID eines HTML-Elements zu binden.

Um das Auftreten der Änderungsereignisse zu ermöglichen, müssen Sie die Person._newName-Funktion ändern.

_newName: function () {
    this["name"] = this._nameArray[this._randomizeValue()];
    this['color"] = this._colorArray[this._randomizeValue()];
    }

Sie können die Bindung testen, indem Sie die Person.start-Methode aufrufen.
```
myPerson.start();
```
Wenn Sie die App erstellen und ausführen, sollten Sie Folgendes sehen:

"Welcome, Harry"

Der Name und die Namensfarbe sollten sich kontinuierlich ändern.

Share via