如何绑定复杂对象 (HTML)

项目
12/11/2015

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

在许多情况下，你希望你的应用绑定到复杂的对象，特别是管理不由应用的 UI 控制的处理的那些对象。本主题介绍如何编写应用（该应用显示包含某个名称和某种颜色的某个对象中的数据），这基本上与快速入门：绑定数据和样式相同。在这种情形下，对象管理更改进程自身，而不是响应触发更改的按钮。

先决条件

通读主题快速入门：将数据和样式绑定到 HTML 元素，可能会有助于你完成此帮助主题中的步骤。

说明

步骤 1: 设置项目以使用绑定

创建一个空白的使用 JavaScript 的 Windows 运行时应用，并将其命名为“ObjectBinding”。
在 default.html 中，添加用于绑定的 DIV 元素并为其提供 ID“objectBinding”****、嵌入式文本“Welcome”以及具有 ID“bindableSpan”****的 SPAN 元素，如此处所示。
```
<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); 
        }
    });

})();

现在将两种公共方法添加到 Person 定义（传递到 WinJS.Class.define 的第二个参数），这两种方法用于启动和停止每 500 毫秒更改名称和颜色字段的进程。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 函数将 WinJS.Binding.mixin 对象的功能添加到“Person”对象中，前一对象包括 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.js 中，将以下代码添加到 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 元素的 ID。

若要使更改事件发生，则必须更改 Person._newName 函数。

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

可以通过调用 Person.start 方法来测试绑定。
```
myPerson.start();
```
构建并运行应用时，应看到以下内容：

Welcome, Harry（欢迎你，哈里）

名称和名称颜色应不断更改。

Share via

如何绑定复杂对象 (HTML)

先决条件

说明

步骤 1: 设置项目以使用绑定

步骤 2: 设置复杂对象

步骤 3: 将对象绑定到 HTML

相关主题

其他资源