简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到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 单击“下一张”按钮后显示的图片

Windows Store App JavaScript 开发:简单对象绑定的更多相关文章

  1. Windows Store App JavaScript 开发:页内导航

    页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...

  2. Windows Store App JavaScript 开发:模板绑定

    WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...

  3. Windows Store App JavaScript 开发:获取文件和文件夹列表

    在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...

  4. Windows Store App JavaScript 开发:小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

  5. Windows Store App JavaScript 开发:选取文件和文件夹

    前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...

  6. Windows Store App JavaScript 开发:页面加载

      在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...

  7. Windows Store App JavaScript 开发:WinJS库控件

    在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...

  8. Windows Store App JavaScript 开发:文件选取器

    正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...

  9. Windows Store App Image开发示例

    通过上面的介绍,读者已经了解了Image对象及ImageBrush对象的使用方法和常用属性,在实际的开发工作中,比较常用的是Image对象,下面以一个幼儿园识物识字卡应用为例,来帮助读者更好的理解Im ...

随机推荐

  1. go语言-helloworld

    1.非root用户,先在home目录下载 wget https://storage.googleapis.com/golang/go1.7.3.src.tar.gz 2.解压包 tar -xzf go ...

  2. easyui from 缓存问题处理

    1 这是ie低版本,缓存了easyui form load事件获取的服务器端数据,给ajax时间加上清除缓存就ok. 找到easyui 中的form load事件  添加cache:false, /* ...

  3. Bootstrap学习(1)

    文档顶部写上H5的DOCTYPE声明 head部分: <meta> (1)编码方式 (2)在IE运行最新的渲染模式  <meta http-equiv="x-ua-comp ...

  4. [ASM C/C++] C语言的main 函数

    C语言有两种可能的运行环境 1. 独立(freestanding) 在独立环境中,C程序执行不需要操作系统的支持,因此只具有最小的链接库能力. 2. 宿主(hosted) 在宿主的环境中,C程序会在操 ...

  5. mysql查看修改字符集

    1.列出MYSQL支持的所有字符集: SHOW CHARACTER SET; 2.当前MYSQL服务器字符集设置 SHOW VARIABLES LIKE 'character_set_%'; 3.当前 ...

  6. 几个简单的css样式使用说明

    假设我们的单标签是一个 div: 定义如下通用CSS: div{ position:relative; width:200px; height:60px; background:#ddd; } 法一: ...

  7. 解决小米、红米及其他 Android 手机无法在 Mac 下进行真机调试的问题(转)

    转自:http://ju.outofmemory.cn/entry/103522 Begin iOS 2014-08-19 271 阅读 手机 Android 小米 mac 调试 在 Mac OSX ...

  8. linux screen 命令详解

    一.背景 系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份.ftp 传输等等.通常情况下我们都是为每一个这样的任务开一个远 ...

  9. C 语言

    1, //         char server[] = BaseNetServerIp; //        string  serverStr = _aliNetServerEnabled?Ne ...

  10. [转]UE4 Blueprint编译过程

    Blueprint 编译概述   一.术语 Blueprint,像C++语言一下的,在游戏中使用前需要编译.当你在BP编辑器中,点击编译按钮时候,BP资源开始把属性和图例过程转换为一个类对象处理. 1 ...