Windows Store App JavaScript 开发:简单对象绑定

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

时间: 2024-10-27 06:08:48

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

Windows Store App JavaScript 开发:页内导航

页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容.WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件.PageControlNavigator控件

Windows Store App JavaScript 开发:模板绑定

WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控件的方法相似:在页面中添加一个div元素,将div元素的data-win-control属性设置为WinJS.Binding.Template.定义WinJS库模板以后,需要在WinJS库模板内部添加控件以显示绑定的数据,WinJS库模板内部只能有一个根元素,当绑定多条数据时,需要在WinJS库模板

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

在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolders类的相应属性来实现,可用属性包括documentsLibrary(文档库).musicLibrary(音乐库)和videosLibrary(视频库)等.获取到用户库之后,就可以使用KnownFolders类中的getItemsAsync.getFilesAsync或getFoldersAsync函

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

通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目,以及怎样向项目中添加功能实现代码. 首先启动Visual Studio 2012集成开发工具,打开"文件"菜单,选择其中的"新建项目"菜单项后会弹出"新建项目"窗口.在"新建项目"窗口左侧的JavaScript模板分类中选择&q

Windows Store App JavaScript 开发:WinJS库控件

在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListView控件以网格或列表的方式显示多条数据.ListView控件的常用属性有: q  groupDataSource属性,用来设置分组的数据源. q  groupHeaderTemplate属性,用来为分组的头部设置模板. q  itemDataSource属性,用来为组中的数据项设置数据源. q  it

Windows Store App JavaScript 开发:页面加载

  在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlControl控件接收一个包含页面地址的对象作为参数,并根据这个地址加载相应的页面:PageControl控件是自定义控件,可以使用WinJS.UI.Pages.define函数将一个页面定义为PageControl控件,然后在其他页面中使用,使用这个PageControl控件就相当于加载了该控件相对应的页

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

前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSingleFileAsync函数用于选取单个文件,pickMultipleFilesAsync函数用于选取多个文件:而FolderPicker类中只有一个pickSingleFolderAsync函数,用来选取单个文件夹.下面以一个应用程序为例来演示如何选取文件或文件夹. 新建一个JavaScript的W

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

正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进行操作的选取器和对文件夹进行操作的选取器.对文件进行操作的选取器包含文件打开选取器和文件保存选取器,文件打开选取器由FileOpenPicker类表示,用来选取或打开文件:文件保存选取器由FileSavePicker类表示,用来向指定的文件系统位置中保存文件.对文件夹进行操作的选取器由FolderP

C#学习(九)之Windows Store App &amp; WP 开发小记(一)

由于课程已经讲述完毕,所以本次学习记录就讨论记录一下我在Windows Store App & WP开发中遇到的一些问题与收获. 一.数据库(Sqlite)的使用 虽然资料很难找,但sqlite在这两个平台的使用还是很简单的. 首先是环境配置阶段: 1.工具->拓展与更新->联机,然后在右上搜索sqlite,之后下载安装下图两个打勾的拓展包,注意要重启VS方才生效. 2.项目->管理NuGet程序包->联机,搜索sqlite,安装下图打勾内容,如果项目多出下图两个文件即安装