快速入門：繫結資料與樣式 (HTML)

發行項
12/11/2015

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

您可以使用適用於 JavaScript 的 Windows Library 繫結，將資料及樣式繫結到 HTML 元素。與 WinJS 的繫結預設是單向的，這表示當資料和樣式的值變更時，HTML 元素就會更新，但是當 HTML 元素變更時，資料不會更新。這個快速入門示範最基本的繫結，也就是以宣告方式繫結到只包含資料的簡單物件。如需更為進階的繫結相關資訊，請參閱如何繫結複雜物件及如何使用範本繫結資料。

先決條件

這個主題假設您可以使用 JavaScript 建立基本的 Windows 執行階段應用程式。如需建立第一個應用程式的指示，請參閱使用 JavaScript 建立您的第一個應用程式。

設定繫結專案

若要設定專案來使用繫結，請完成下列步驟。

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

繫結資料

您可以將任何資料類型繫結到 HTML 元素，但是為了便於示範，我們只設定一個具有名字欄位的 person 物件。

警告請勿嘗試將資料繫結至 HTML 元素的識別碼。

在 default.js 的立即叫用匿名函式中新增下面程式碼行，緊接在 use strict 指示詞之後。

(function () {
    "use strict";

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

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

在 DIV 元素內部，新增一個可存取 person.name 欄位的 SPAN 元素。

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

您必須呼叫 WinJS.Binding.processAll 讓名稱出現。WinJS.Binding.processAll 會從指定的元素開始搜尋 data-win-bind 屬性，然後搜尋該元素的所有子系。WinJS.Binding.processAll 的第二個參數會提供要插入指定元素的資料內容。請在 default.html 的 app.onactivated 事件處理常式中新增下列程式碼。
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}
```
當您建置和偵錯專案時，應該會看到：

Welcome, Fran
請思考下列程式碼片段：
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
```
- WinJS 繫結系統使用一個可觀察的層來傳播變更通知。
- 當您將資料物件傳送到 processAll 做為資料內容時，它會包裝在對 WinJS.Binding.as 的呼叫中，來為該物件建立可觀察的 Proxy，或與已建立的可觀察 Proxy 會合。
- 所有您想要為其觸發通知的「寫入」(亦即屬性集的寫入) 都必須透過這個 Proxy 層發生，您可以稍後透過 WinJS.Binding.as 來與可觀察的 Proxy 會合。
- 通常最簡單的做法就是，使用該可觀察的 Proxy 做為讀取和寫入資料時所用的物件。
- 當使用繫結初始設定式來覆寫預設行為 (例如 WinJS.Binding.oneTime)，或嘗試針對非可延伸物件 (例如凍結的或 WinRT 投射的物件) 進行繫結時，就會發生單次繫結。
為了示範基礎資料變更時發生了什麼事，我們只使用一個按鈕，以模擬從不同處理程序或從內部資料存放區取得資料的動作。將 BUTTON 元素新增到 default.html，在 DIV 下方。
```
<button id="btnGetName">Get name</button>
```

新增模擬方法以模擬取得資料。在這個情況下，我們將使用隨機化索引從陣列中取得名稱。在 default.js 中，新增下列程式碼到 app.onactivated 事件處理常式中，它可處理按鈕的 Click 事件。

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

為了測試此程式碼，請建置並偵錯應用程式。您每次按一下 [取得名稱] 按鈕，應該會看到不同名稱。

繫結樣式

現在我們將繫結 SPAN 元素的背景色彩。

在 default.html 中，將 style.background 值新增到 data-win-bind 屬性，並將其繫結設為 Person 物件的色彩欄位。

<div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>

在 default.js 中，將色彩欄位新增到 Person 物件。

秘訣繫結運算式的左邊是某個元素的任何屬性及其子屬性，使用的是 JavaScript 語法 (您會用來以程式設計方式對其進行指派)。
```
var person = { name: "Fran", color: "red" };
```

另外在 default.js 的 app.onactivated事件處理常式中，新增第二個色彩陣列並變更 getName 函式，使其更新名稱的色彩。

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

請記得變更按鈕 Click 事件處理常式中的 getName 呼叫。

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

當您建置並偵錯應用程式時，應該會看到按一下 [取得名稱] 按鈕會同時更新名稱及名稱色彩。

摘要與後續步驟

在這個快速入門中，您已經看到如何將簡單 JavaScript 物件繫結到 HTML Span。

若要了解如何繫結更複雜的物件，請參閱如何繫結複雜物件。如果您要使用範本繫結多個物件，請參閱如何使用範本繫結資料。

Share via