可以將數據和樣式綁定到 HTML 元素，方法是使用 Windows JavaScript 庫綁定。默認情況下，使用 Windows JavaScript 庫綁定是單向的，這意味着當數據和樣式值改變時會更新 HTML 元素，但當 HTML 元素改變時不會更新數據。此快速入門介紹綁定的最基本類型，該綁定是與僅包含數據的簡單對象的聲明性綁定。有關綁定的更高級類型的信息，請參閱如何綁定複雜對象和如何使用模板綁定數據。
要點 當你執行聲明的綁定時，你應該在你的應用的啓運過程中始終將WinJS.Binding.optimizeBindingReferences 屬性設置爲 true。如果你不這樣做，你的應用中的綁定可能會泄漏內存。
先決條件
本主題假定你可以使用 JavaScript 創建爲 Windows 構建的基本 Windows 應用商店應用。有關創建第一個應用的說明，請參閱創建第一個採用 JavaScript 的 Windows 應用商店應用。
設置綁定項目
若要設置項目以使用綁定，請完成以下步驟。
-
使用 JavaScript 創建空白 Windows 應用商店應用並將其命名爲 BindingApp。
-
在 default.html 中，使用此 HTML 替換模板 HTML。
DOCTYPE html> <</span>html> <</span>head> <</span>meta charset="utf-8" /><</span>title>BindingApp</</span>title> <</span>linkhref="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet"> <</span>scriptsrc="//Microsoft.WinJS.1.0/js/base.js"></</span>script> <</span>scriptsrc="//Microsoft.WinJS.1.0/js/ui.js"></</span>script> <</span>link rel="stylesheet"href="/css/default.css" /> <</span>script src="/js/default.js"></</span>script></</span>head> <</span>body></</span>body> </</span>html> -
在你的啓動過程中將 WinJS.Binding.optimizeBindingReferences 屬性設置爲 true。在這種情況下，你可以將該屬性添加到你的項目中的 default.js 文件的開頭。
(function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; ... }
-
添加用於綁定的 DIV 元素併爲其提供 ID“basicBinding”和嵌入式文本 Welcome，如此處所示。
<</span>body> <</span>div id="basicBinding"> Welcome </</span>div> </</span>body>
綁定數據
可以將任何類型的數據綁定到 HTML 元素，但是對於說明用途，我們僅設置具有第一個名稱的字段的person 對象。
警告 不要試圖將數據綁定到 HTML 元素的 ID。
-
將 SCRIPT 元素添加到 default.html 文件正文的 DIV 元素後面。綁定代碼必須出現在它綁定到的元素後面（在本示例中爲將在下一步驟添加的 SPAN 元素）。
<</span>script type="text/javascript"> var person = { name: "Fran" };</</span>script> -
在 DIV 元素內，添加訪問 person.name 字段的 SPAN 元素。
<</span>div id="basicBinding"> Welcome, <</span>span id="nameSpan" data-win-bind="innerText: name"></</span>span> </</span>div> -
必須調用 WinJS.Binding.processAll 才能顯示名稱。WinJS.Binding.processAll 開始在指定元素查找 data-win-bind 屬性，然後搜索該元素的所有後代。
<</span>script type="text/javascript"> var person = { name: "Fran" }; var personDiv = document.getElementByIdx_x_x("nameSpan"); WinJS.Binding.processAll(personDiv, person);</</span>script> -
構建並調試項目時，應看到以下內容：
Welcome, Fran（歡迎你，弗蘭）
-
該綁定僅爲一次性綁定，這表示數據更改時文本不會更改。JavaScript 對象本身無法在應用程序更改時通知該應用程序，但你可以通過使用 WinJS.Binding.as 將該對象轉換爲綁定上下文。在WinJS.Binding.processAll 調用之後添加以下代碼行。
bindingSource 對象是 person 對象的可觀察到的表示形式，因此對 bindingSource 所進行的更改可能會顯示在綁定的 HTML 元素中。
-
若要演示基本數據更改時所出現的情況，我們僅使用按鈕來模擬從其他進程或從內部數據存儲中獲取數據。添加 BUTTON 元素，與此類似。
<</span>button id="btnGetName">Get name</</span>button> -
添加模擬獲取數據的 mock 方法。在此情形中，我們通過使用隨機化索引從數組中獲取名稱。使用以下代碼處理按鈕的單擊事件。
var btn = document.getElementByIdx_x_x("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 對象。
var person = { name: "Fran", color: "red" };
-
將 style.background 值添加到 data-win-bind 屬性，並將其綁定設置爲 Person 對象的顏色字段。
<</span>div id="basicBinding"> Welcome, <</span>span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></</span>span> </</span>div> -
添加另一顏色數組並更改 getName 函數，以便該函數更新名稱顏色。
var colorArray = new Array("lime", "lavender", "yellow", "orange", "pink","greenyellow", "white", "lightblue","lightgreen", "lightyellow"); functiongetName(source, nameArray, colorArray) { source.name = nameArray[randomizeValue()]; source.color = colorArray[randomizeValue()]; }
-
請勿忘記在單擊事件處理程序中更改 getName 調用。
var btn = document.getElementByIdx_x_x("btnGetName").onclick = function () { getName(bindingSource, nameArray, colorArray); }
-
構建和調試應用時，應看到單擊“獲取名稱”按鈕會更新名稱和名稱顏色。
/////////////////////////////////////////default.js///////////////////////////////////////////
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
var btn = document.getElementByIdx_x_x("btnGetName").onclick = function () {
getName(bindingSource, nameArray, colorArray);
}
var nameArray =
new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");
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()];
}
function randomizeValue() {
var value = Math.floor((Math.random() * 1000) % 8);
if (value < 0)
value = 0;
else if (value > 9)
value = 9;
return value;
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
app.start();
})();
//////////////////////////////////////////////////////////////default.html////////////////////////////////////<!DOCTYPE html><html><head><meta charset="utf-8" /><title>App1</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><!-- App1 references --><link rel="stylesheet" href="/css/default.css" /><script src="/js/default.js"></script></head><body><div id="basicBinding">Welcome,<span id="nameSpan" data-win-bind="innerText: name; style.background: color"></span></div><script type="text/javascript">var person = { name: "Fran", color: "red" };var personDiv = document.getElementByIdx_x("nameSpan");WinJS.Binding.processAll(personDiv, person);var bindingSource = WinJS.Binding.as(person);</script><button id="btnGetName">Get name</button></body></html>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
