Win10系列：JavaScript 数据绑定

Posted 2020-09-07 冯瑞涛（2009年已经停止更新）请加微信：iterryfen

使用数据绑定可以使页面中元素的属性值与数据源中的数据同步，其中数据源可以来自数据库、文件以及自定义的数据等。在常用的数据绑定方法中，简单对象绑定是将html元素与一个仅包含数据的简单对象相绑定，模板绑定是使用WinJS库模板来绑定数据。下面首先介绍简单对象绑定。

19.3.1 简单对象绑定

简单对象绑定是一种基本的绑定类型，可以实现将一个对象中的数据绑定到HTML元素的属性。下面通过一个示例来演示如何使用HTML5和javascript开发一个实现简单对象绑定的Windows应用商店应用程序。在这个应用程序中将一个img控件与一个包含图片路径信息的对象相绑定，实现在img控件中显示图片。

在Visual Studio 2012中新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为SimpleObjectBinding。接着添加项目中用到的图片文件，在项目默认新建的文件夹images上单击右键，选择"添加"à"现有项"，在本地文件夹中选择五张图片并添加到项目中。

完成添加图片的操作后，接下来打开default.html文件，在default.html文件的body元素中定义一个div元素，在其内部定义一个img控件和一个按钮，并将img控件的src属性与数据源的PicturePath属性相邦定，按钮用于实现图片切换。代码片段如下所示：

<div class="bindingStyle">

<img id="pictureHost" data-win-bind="src:PicturePath" src="#" />

<br />

<button id="NextPictureButton" class="buttonStyle">下一个图片</button>

</div>

接下来在body元素内添加一个script元素，在其中定义后续代码中需要用到的变量，代码片段如下所示：

<script type="text/javascript">

var i = 0;

var picture = {PicturePath: "/images/老黄瓜瘦肉汤.jpg"}

var pictureArray = new Array("/images/老黄瓜瘦肉汤.jpg", "/images/东北汆白肉.jpg", "/images/冬瓜盅.jpg", "/images/全丝烩鱼翅.jpg", "/images/如意北极贝.jpg");

</script>

在上面的代码中，定义了一个变量i，一个对象picture和一个名为pictureArray的数组。变量i是一个索引；picture对象包含一个PicturePath属性，用于存放一张图片的路径；数组pictureArray中存放了五张图片的路径。

下面继续在script元素中添加代码，初始化前台img控件与数据对象的绑定，代码片段如下所示：

//将img控件和picture对象绑定

var pictureHost = document.getElementById("pictureHost");

//初始化picture和img控件的绑定关系

WinJS.Binding.processAll(pictureHost, picture);

//根据picture对象获得一个可感知自身数据变化的对象

var bindingSource = WinJS.Binding.as(picture);

在上面的代码中，首先调用document对象的getElementById 函数获得id属性值为pictureHost的元素对象，赋值给pictureHost变量，并使用WinJS.Binding.processAll函数初始化元素对象和picture对象的绑定关系。接着调用WinJS.Binding.as函数以picture对象为参数获得一个名为"bindingSource"的对象，这个对象具有与picture对象相同的属性和属性值，并且可以感知自身属性的变化。在程序运行过程中bindingSource对象的PicturePath属性值变化时，与picture对象相绑定的元素对象的src属性值也将随之改变。

接下来仍然继续在script元素中添加代码，为"下一个图片"按钮注册单击事件处理函数，当单击这个按钮时，img控件将显示pictureArray数组中的下一个图片。代码片段如下所示：

document.getElementById("NextPictureButton").onclick = function () {

if (i < pictureArray.length) {

//将下一张图片的地址赋给PicturePath属性

bindingSource.PicturePath = pictureArray[i];

} else {

//显示完最后一张图片后，再从第一张开始

i = 0;

bindingSource.PicturePath = pictureArray[i];

}

i++;

}

在上面的代码中，首先调用document对象的getElementById函数获得id属性值为NextPictureButton的元素对象，并为这个元素对象注册单击事件处理函数。在事件处理函数内，判断变量i的值，如果i小于pictureArray数组元素的个数，那么将pictureArray[i]元素中保存的图片路径赋值给bindingSource对象的PicturePath属性，否则设置变量i的值为0，并将pictureArray数组第一个元素中的图片路径赋值给bindingSource对象的PicturePath属性，最后把i在每次点击时加1。

为了控制default.html页面中图片和按钮的显示位置，在default.css文件中设计相应的样式，代码片段如下所示：

/*设置class属性值为bindingStyle的元素的边距*/

.bindingStyle {

margin-left: 100px;

margin-top: 100px;

}

/*设置class属性为buttonStyle的元素的边距*/

.buttonStyle {

margin-top: 10px;

margin-left: 30px;

}

在上面的代码中，使用default.html页面中div元素的class属性值bindingStyle设置了图片和按钮相对于应用程序界面的位置，通过按钮的class属性值buttonStyle设置了按钮相对于图片的位置。

启动调试，初始界面中显示的是"老黄瓜瘦肉汤"图片，如图19-10所示。单击"下一张"按钮，会变换到下一张图片"东北汆白肉"，如图19-11所示。这样连续单击按钮，实现不同图片之间的切换。当切换到最后一张图片时，再次单击按钮又会回到第一张图片"老黄瓜瘦肉汤"。

图19-10 应用程序初始显示的图片 图19-11 单击"下一张"按钮后显示的图片