使用数据绑定可以使页面中元素的属性值与数据源中的数据同步,其中数据源可以来自数据库、文件以及自定义的数据等。在常用的数据绑定方法中,简单对象绑定是将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++;

}

,并将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 数据绑定的更多相关文章

  1. WPF编游戏系列 之五 数据绑定

    原文:WPF编游戏系列 之五 数据绑定        在上一篇通过用户控件将重复使用的控件封装为一个控件组,大大减少了C#代码数量,本篇继续对该控件组进行数据绑定,节省为每个控件赋值的工作.对于数据绑 ...

  2. JavaScript 系列--JavaScript一些奇淫技巧的实现方法(二)数字格式化 1234567890转1,234,567,890;argruments 对象(类数组)转换成数组

    一.前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746 ...

  3. Win10系列:JavaScript 的 WinJS库

    WinJS 库是由 CSS 和 JavaScript 文件组成的.使用Visual Studio 2012新建一个JavaScript 的Windows应用商店的空白应用程序项目,在项目的引用管理器中 ...

  4. Win10系列:VC++数据绑定

    数据绑定是一种将后台数据绑定到前台控件的机制,通常用于动态地将对象或集合中所保存的数据显示到前台界面中.本节通过一个具体的示例来说明在Windows应用商店应用中如何通过数据绑定将保存在集合中的数据显 ...

  5. Win10系列:JavaScript综合实例2

    在项目中添加一个名为pages的文件夹,并在pages文件夹里面再添加一个名为mainPage的文件夹,接着在mainPage文件夹里添加一个"页面控制"项,命名为mainPage ...

  6. Win10系列:JavaScript综合实例1

    上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识 ...

  7. Win10系列:JavaScript图形

    在页面中添加canvas元素会在页面上生成一个矩形的位图画布,可以使用JavaScript在画布上实时绘制图形图像.在绘制图形时,需要先调用画布的getContext函数获取与该画布相关的用于绘制图形 ...

  8. Win10系列:JavaScript多媒体

    在应用程序的日常使用中,经常会使用多媒体播放器来播放多媒体文件,包括视频.音频等,因此对于开发者来说,学习多媒体播放技术对开发应用是很有帮助的.本小节主要介绍如何使用HTML5和JavaScrip实现 ...

  9. Win10系列:JavaScript动画4

    上面介绍的动画效果是通过Windows动画库创建的,这里的旋转动画是通过设置页面元素的style对象的相关属性来创建,此动画的效果是将界面元素沿着指定的方向进行旋转.下面介绍style对象的几个常用属 ...

随机推荐

  1. 一般删除网页数据和jquery下使用Ajax删除数据的区别

    1. 一般删除网页数据 就是指用户在点击删除的时候,会跳转到DeleteUser.ashx一般处理程序中,并且通过get传参的方式传递一个id的参数,然后在后台处理 <a href='Delet ...

  2. 分组查询以及having使用

    Group  by 注意事项:对查询的列有限制,除了聚合函数外,就必须是分组的项 order  by总是放在最后 代码示例: select Gender as 性别 ,count (Gender) a ...

  3. Discrete Log Algorithms :Baby-step giant-step

    离散对数的求解 1.暴力 2.Baby-step giant-step 3.Pollard’s ρ algorithm …… 下面搬运一下Baby-step giant-step 的做法 这是在 ht ...

  4. 浅谈 Java JPDA

    前言 程序员在坊间有非常多有趣的故事,其中就有这么一则:”这个在我的电脑上是好的,没问题的呀,诺,你看咯,一定是你打开姿势不正确,浏览器版本不正确,操作系统不统一等,总之不是我代码问题(傲娇)”.看到 ...

  5. leecode第七题(整数反转)

    题解给的思路: ; class Solution { public: int reverse(int x) { ;//如果这里还是int,会在判断前就被裁剪了,无法判断溢出 ; ) flag=; wh ...

  6. 虹软人脸识别SDK(java+linux/window)

    虹软官网:http://www.arcsoft.com.cn/ 登录后要实名认证才可以使用sdk. 下图这两个是我选择的,window版本地开发测试,linux版是生产环境使用. 1. 保存激活码,下 ...

  7. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  8. Codeforces 458C - Elections

    458C - Elections 思路: 三分凹形函数极小值域 代码: #include<bits/stdc++.h> using namespace std; #define ll lo ...

  9. Django - models.py 应用

    Django - models.py 应用 编写 models.py 文件 from django.db import models # Create your models here. class ...

  10. legend2---开发日志8(thinkphp和vue如何配合才能达到最优)

    legend2---开发日志8(thinkphp和vue如何配合才能达到最优) 一.总结 一句话总结:凡是php可以做的,都可以先在后端处理好数据,然后再丢给前端 凡php可以做的,都可以先在后端处理 ...