快速入门：绑定数据和样式 (HTML)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

可以将数据和样式绑定到 HTML 元素，方法是使用 Windows JavaScript 库绑定。默认情况下，使用 WinJS 绑定是单向的，这意味着当数据和样式值发生更改时会更新 HTML 元素，但当 HTML 元素发生更改时并不会更新数据。此快速入门介绍绑定的最基本类型，该绑定是与仅包含数据的简单对象的声明性绑定。有关绑定的更高级类型的信息，请参阅如何绑定复杂对象和如何使用模板绑定数据。

先决条件

本主题假设你可以创建使用 JavaScript 的基本的 Windows 运行时应用。有关创建第一个应用的说明，请参阅创建第一个使用 JavaScript 的应用。

设置绑定项目

若要设置项目以使用绑定，请完成以下步骤。

创建一个新的空白的使用 JavaScript 的 Windows 运行时应用并将其命名为“BindingApp”。
在 default.html 中，添加用于绑定的 DIV 元素并为其提供 ID“basicBinding”****和嵌入式文本“Welcome”，如此处所示。
```
<body>
    <div id="basicBinding">
      Welcome
    </div>
</body>
```

绑定数据

可以将任何类型的数据绑定到 HTML 元素，但是对于说明用途，我们仅设置具有第一个名称的字段的 person 对象。

警告不要试图将数据绑定到 HTML 元素的 ID。

在 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.js 中，将以下代码添加到 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 的调用中，后者可为该对象创建可观察代理，或集合已创建的可观察代理。
- 你想要为其触发通知的所有“写入”（即，对属性集的写入）需要通过此代理层进行，你可以在以后通过 WinJS.Binding.as 集合可观察代理。
- 经常进行的简单操作只需将该可观察代理作为对象来进行读取和写入数据即可。
- 在使用绑定初始值替代默认行为（例如 WinJS.Binding.oneTime）或尝试对不可扩展的对象（例如冻结对象或 WinRT 投影的对象）进行绑定时，将发生一次性绑定。
若要演示基本数据更改时所出现的情况，我们仅使用按钮来模拟从其他进程或从内部数据存储中获取数据。将 BUTTON 元素添加到 DIV 下方的 default.html。
```
<button id="btnGetName">Get name</button>
```

添加模拟获取数据的 mock 方法。在此情形中，我们通过使用随机化索引从数组中获取名称。在 default.js 中，将以下代码添加到可处理按钮的单击事件的 app.onactivated 事件处理程序。

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

记住在按钮的单击事件处理程序中更改 getName 调用。

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

构建和调试应用时，应看到单击“获取名称”按钮会更新名称和名称颜色。

摘要和后续步骤

在此快速入门中，已看到如何将简单的 JavaScript 对象绑定到 HTML SPAN。

若要查看绑定较复杂的对象的方法，请参阅如何绑定复杂对象。如果希望使用模板绑定多个对象，请参阅如何使用模板绑定数据。