04. HTML/WinJS Controls and Data Binding

Submitted by mei on 六, 2012-12-22 08:58

WinJS Data Binding and Controls

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

重要執行宣告式繫結時，永遠要將應用程式啟動程序中的 WinJS.Binding.optimizeBindingReferences 屬性設定成 true。如果沒有這樣做，應用程式中的繫結可能會造成記憶體流失。

先決條件

這個主題假設您可以建立使用 JavaScript 針對 Windows 建置的基本 Windows 市集應用程式。

設定連結專案

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

使用 JavaScript 建立新的空白 Windows 市集應用程式，並將它命名為 BindingApp。

在 default.html 中，以這個 HTML 取代範本 HTML。

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>BindingApp</title>
        <!-- WinJS references -->
         <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
         <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
         <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
         <!-- BindingApp references -->
         <link rel="stylesheet" href="/css/default.css" />
         <script src="/js/default.js"></script>
      </head>
      <body></body>
</html>

將啟動程序中的 WinJS.Binding.optimizeBindingReferences 屬性設定成 true。在此案例中，您可以將它新增到專案中 default.js 檔案的開頭。
JavaScript
(function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; ... }
為繫結新增 DIV 元素並將識別碼設為 "basicBinding"，將內部文字設為 Welcome，如下所示。
HTML
```
<body>
    <div id="basicBinding">
      Welcome
    </div>
</body>



連結資料
```

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

在 default.html 檔案本文 DIV 元素後面加上 SCRIPT 元素。繫結程式碼必須出現在其繫結的元素後面 (在這個案例中是下一步要新增的 SPAN 元素)。
HTML
<script type="text/javascript"> var person = { name: "Fran" }; </script>

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

HTML

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

您必須呼叫 WinJS.Binding.processAll 讓名稱出現。WinJS.Binding.processAll 會從指定的元素開始搜尋 data-win-bind 屬性，然後搜尋該元素的所有子系。

HTML

<script type="text/javascript">
    var person = { name: "Fran" };
    var personDiv = document.getElementById("nameSpan");
    WinJS.Binding.processAll(personDiv, person);
</script>

當您建置和偵錯專案時，應該會看到：

Welcome, Fran
目前的繫結是一次性的動作，表示文字不會在資料變更時變更。JavaScript 物件無法靠自己將本身的變更通知應用程式，但您可以使用 WinJS.Binding.as 將物件轉換成繫結內容。將下行的程式碼新增到 WinJS.Binding.processAll 呼叫之後。
JavaScript
<script type="text/javascript"> var person = { name: "Fran" }; var personDiv = document.getElementById("nameSpan"); WinJS.Binding.processAll(personDiv, person); var bindingSource = WinJS.Binding.as(person); </script>
bindingSource 物件是 person 物件的可觀察表示法，因此，對 bindingSource 的變更會顯示在繫結的 HTML 元素中。
為了示範基礎資料變更時發生了什麼事，我們只使用一個按鈕，來模擬從不同處理程序或從內部資料存放區取得資料的動作。新增 BUTTON 元素，像這樣。
HTML
<button id="btnGetName">Get name</button>

新增模擬方法以模擬取得資料。在這個情況下，我們將使用隨機化索引從陣列中取得名稱。使用下列程式碼來處理按鈕的按一下事件。

JavaScript

var btn = document.getElementById("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 元素的背景色彩。

將色彩欄位新增到 Person 物件。

JavaScript

var person = { name: "Fran", color: "red" };

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

HTML

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

新增第二個色彩陣列並變更 getName 函式，使其更新名稱的色彩。

JavaScript

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

別忘記變更按一下事件處理常式中的 getName 呼叫。

JavaScript

var btn = document.getElementById("btnGetName").onclick = function () {
            getName(bindingSource, nameArray, colorArray);
    }

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

資料來源:http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx

You are here

04. HTML/WinJS Controls and Data Binding

繫結樣式