Win10系列:JavaScript 数据绑定

Posted 冯瑞涛(2009年已经停止更新)请加微信:iterryfen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Win10系列:JavaScript 数据绑定相关的知识,希望对你有一定的参考价值。

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

19.3.1 简单对象绑定

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

Visual Studio 2012中新建一个JavaScriptWindows应用商店的空白应用程序项目,将其命名为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");

//初始化pictureimg控件的绑定关系

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 单击"下一张"按钮后显示的图片

以上是关于Win10系列:JavaScript 数据绑定的主要内容,如果未能解决你的问题,请参考以下文章

Win10系列:JavaScript页内导航

Win10系列:JavaScript图形

Win10系列:JavaScript动画4

Win10系列:JavaScript页面导航

Win10系列:JavaScript 控件的使用

Win10系列:JavaScript动画2