使用数据绑定可以使页面中元素的属性值与数据源中的数据同步，其中数据源可以来自数据库、文件以及自定义的数据等。在常用的数据绑定方法中，简单对象绑定是将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元素，在其中定义后续代码中需要用到的变量，代码片段如下所示：