如何繫結複雜物件 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

在許多情況下，您會希望應用程式繫結複雜物件，特別是管理不受應用程式 UI 控制之處理程序的物件。這個主題示範如何撰寫能夠從包含名稱和色彩的物件中顯示資料的應用程式，這裡的內容基本上與快速入門：繫結資料與樣式所述內容相同。在此案例中，物件會自行管理變更處理程序，而非回應會觸發變更的按鈕。

先決條件

進行快速入門：將資料及樣式繫結到 HTML 元素主題，有助於完成這個處理方式主題中的步驟。

指示

步驟 1: 設定專案以使用繫結

使用 JavaScript 建立一個空白的 Windows 執行階段應用程式，並將它命名為 ObjectBinding。
在 default.html 中，新增用於繫結的 DIV 元素，並將識別碼設為 "objectBinding"，將內部文字設為 Welcome，並將 SPAN 元素識別碼設為 "bindableSpan"，如這裡所示。
```
<body>
    <div id="objectBinding">
      Welcome
      <span id="bindableSpan"></span>
    </div>
</body>
```

步驟 2: 設定複雜物件

定義一個 Person 物件，使其具備名稱及色彩欄位、名稱陣列、色彩名稱陣列，以及可提供陣列隨機索引的私用方式。若需這個物件的定義，您可以使用 WinJS.Class.define 方法。在 default.js 中，將此程式碼新增到立即叫用匿名函式中。


(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); 
        }
    });

})();

現在將兩個可啟動和停止處理程序 (每 500 毫秒變更一次名稱及色彩欄位) 的公用方法，新增至 Person 定義 (傳遞至 WinJS.Class.define 的第二個引數)。對 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;
            }
        }
    });

})();

步驟 3: 將物件繫結到 HTML

現在看不到 Person 物件；也就是說，它變更時不會提供通知。透過混合 Person 物件與正確的繫結功能，我們就可以看到該物件。WinJS.Class.mix 函式可為 Person 物件新增 WinJS.Binding.mixin 物件的功能 (包括 bind 方法) 及 WinJS.Binding.expandProperties 函式的功能 (會在要用於繫結的物件上建立屬性)。呼叫 Person 物件定義之後的 WinJS.Class.mix (您必須定義 Person 類別，才能將它與任一項目混合)。
```
WinJS.Class.mix(Person,
    WinJS.Binding.mixin,
    WinJS.Binding.expandProperties({name: "", color: ""})
); 
```

您也需要在 Person 建構函式內呼叫 _initObservable 以設定 _backingData 屬性。遵循下列方法變更 Person 建構函式：


...
function () {
    this._initObservable();

    this.name = "Harry";
    this.color = "blue";
    this.timeout = null;
    }
...

在具現化 Person 物件之後，您可以將它繫結至兩個屬性。bind 方法採用兩個參數：要繫結之屬性或欄位的名稱，以及可指定繫結方式的函式。此函式有兩個參數：新值及舊值。因為 bind 是執行個體方法，所以我們現在只具現化 Person，並在其名稱及色彩欄位上呼叫 bind。請在 default.html 的 app.onactivated 事件處理常式中新增下列程式碼。
```
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;
    }
}
```
警告請勿嘗試將資料繫結至 HTML 元素的識別碼。

若要讓變更事件發生，您必須變更 Person._newName 函式。

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

您可以透過呼叫 Person.start 方法來測試繫結。
```
myPerson.start();
```
當您建置和執行應用程式時，應該會看到：

Welcome, Harry

名稱及名稱色彩應該會持續變更。

共用方式為

如何繫結複雜物件 (HTML)

先決條件

指示

步驟 1: 設定專案以使用繫結

步驟 2: 設定複雜物件

步驟 3: 將物件繫結到 HTML

相關主題

其他資源