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

在Visual Studio 2012中新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为BindingUsingTemplate。接着添加项目中用到的图片文件，在项目默认新建的文件夹images上单击右键，选择“添加”à“现有项”，在本地文件夹中选择六张图片并添加到项目中。

完成添加图片的操作后，接下来打开default.js文件，在这个文件的匿名函数内“var activation = Windows.ApplicationModel.Activation;”语句的后面定义一个WinJS.Binding.List类的对象，并保存在变量foodDetail中用于定义数据源集合，向WinJS.Binding.List的构造函数传递一个参数数组，数组中包含菜肴名称和菜肴图片信息以对数据源集合进行数据初始化。代码片段如下所示：

var foodDetail = new WinJS.Binding.List([

    { name: "冰梅鸭掌", picture: "/images/冰梅鸭掌.jpg" },

    { name: "东北汆白肉", picture: "/images/东北汆白肉.jpg" },

    { name: "冬瓜盅", picture: "/images/冬瓜盅.jpg" },

    { name: "老黄瓜瘦肉汤", picture: "/images/老黄瓜瘦肉汤.jpg" },

    { name: "牛肉皮蛋粥", picture: "/images/牛肉皮蛋粥.jpg" },

    { name: "全丝烩鱼翅", picture: "/images/全丝烩鱼翅.jpg" }

]);

由于这里将定义WinJS.Binding.List类的对象的代码放在了default.js文件的匿名函数内，由于匿名函数中定义的变量为局部变量，不能直接使用在项目的其他文件中，为此在“app.start();”语句的后面声明一个命名空间，代码片段如下所示：

WinJS.Namespace.define("BindingUsingTemplate",{

    foodDetailName: foodDetail

});

在上面的代码中，调用WinJS.Namespace.define函数声明了一个命名空间BindingUsingTemplate，在命名空间中添加了一个名为foodDetailName的成员，并将foodDetailName成员的值设置为变量foodDetail。

接下来打开default.html文件，在其中添加WinJS库模板和ListView控件，WinJS库模板用于设置数据的显示格式，而ListView控件用于显示数据。代码片段如下所示：

<body>

    <div id="FoodTemplate" data-win-control="WinJS.Binding.Template">

        <div class="itemStyle">

            <img src="#" class="pictureStyle" data-win-bind="src: picture" />

            <h4 class="titleStyle" data-win-bind="innerText: name"></h4>

        </div>

    </div>

    <div data-win-control="WinJS.UI.ListView"

        data-win-options="{itemDataSource: BindingUsingTemplate.foodDetailName.dataSource,

                itemTemplate: FoodTemplate,

                layout: { type: WinJS.UI.GridLayout }

            }">

    </div>

</body>

上面的代码将body元素中的内容分为两部分，第一部分定义了一个WinJS库模板，首先添加一个div元素，设置div元素的id属性值为FoodTemplate，并通过为div元素的data-win-control属性赋值WinJS.Binding.Template，添加一个WinJS库模板。接着在WinJS库模板内部添加一个img控件和一个文本控件，并将img控件的src属性与数据源中数据对象的picture属性相绑定，将文本控件的innerText属性与数据源中数据对象的name属性相绑定。

接下来在第二部分定义了一个ListView控件，首先添加了一个div元素，通过为div元素的data-win-control 属性赋值WinJS.UI.ListView定义一个ListView控件，并设置ListView控件的数据源为BindingUsingTemplate 命名空间下的foodDetail对象的dataSource属性的值。最后将ListView控件的模板设置为上面定义的id属性值为FoodTemplate的WinJS库模板，并将ListView控件的layout属性赋值为{ type: WinJS.UI.GridLayout }，设置以网格布局方式显示数据。

为了控制界面元素的显示位置和外观，在default.css文件中设置相应的样式属性，代码片段如下所示：

/*设置class属性值为itemStyle的元素的大小、边距等属性*/

.itemStyle {

    width: 282px;

    height: 140px;

    padding: 5px;

    overflow: hidden;

    display: -ms-grid;

}

    /*设置class属性值为pictureStyle的元素的大小、边距、位置等属性*/

    .itemStyle .pictureStyle {

        width: 120px;

        height: 120px;

        margin: 10px;

        -ms-grid-column: 1;

    }

    /*设置class属性值为titleStyle的元素的边距、位置等属性*/

    .itemStyle .titleStyle {

        margin: 5px;

        -ms-grid-column: 2;

    }

上面的代码分为三个部分，分别设计了菜肴整体信息、菜肴图片、菜肴名称的样式。

启动调试，可以看到在应用程序界面上以网格布局方式显示图片和文本，效果如图19-12所示。

图19-12 使用模板绑定数据的效果

Windows Store App JavaScript 开发：模板绑定的更多相关文章

  1. Windows Store App JavaScript 开发：简单对象绑定

    简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...

  2. Windows Store App JavaScript 开发：页内导航

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

  3. Windows Store App JavaScript 开发：小球运动示例

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

  4. Windows Store App JavaScript 开发：获取文件和文件夹列表

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

  5. Windows Store App JavaScript 开发：WinJS库控件

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

  6. Windows Store App JavaScript 开发：选取文件和文件夹

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

  7. Windows Store App JavaScript 开发：页面加载

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

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

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

  9. Windows Store App Image开发示例

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

随机推荐

  1. java URL实现调用其他系统发送报文并获取返回数据

    模拟本系统通过Url方式发送报文到目标服务器,并获取返回数据:(实现类) import java.io.BufferedOutputStream; import java.io.BufferedRea ...

  2. Excel 2007 批量删除隐藏的文本框

    该方法取自百度知道,该朋友给出函数,我详细写一下方法. 打开有文本框的excel文件. 按 Alt+F11 打开编辑器. 将下面的函数复制进去: Sub deltxbox()Dim s As Shap ...

  3. 30-React JSX IN DEPTH

    JSX IN DEPTH JSX 从根本上说,JSX只是提供了语法糖React.createElement(component, props, ...children)的功能.以下JSX代码: < ...

  4. 超炫数字特效动画AE模板

    下载方式: 网盘地址+迅雷地址+迅雷地址+备份地址 <ignore_js_op> 本AE模板是由Videohive机构出品的超炫数字特效动画AE模板,Videohive The Numbe ...

  5. LINUX下编译源码时所需提前安装的常用依赖包列表

    yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-deve ...

  6. Docker镜像文件存储结构

    docker相关文件存放在:/var/lib/docker目录下 镜像的存储结构主要分两部分,一是镜像ID之间的关联,一是镜像ID与镜像名称之间的关联,前者的结构体叫Graph,后者叫TagStore ...

  7. jquery总结06-动画事件02-上卷下拉动画

    .slideDown() 下拉动画 动画执行之后的操作写在回调函数里 $("ele").slideDown(1000, function() { //等待动画执行1秒后,执行别的动 ...

  8. cocos学习笔记：快速上手

    cc.Class({ //奇怪的语法风格,cc.class, extends: cc.Component, //扩展自cc.Component properties: { //类的属性设置 jumpH ...

  9. 卷土重来之staticHtml基础使用教程

    前段时间发布了一个asp.net生存html缓存的东西,老实说坑了蛮多的人,bug比较多, 经过这段时间的测试与改进,应该到了可以使用的地步了, 欢迎大家测试与使用,下面我介绍使用教程,对了,这里感谢 ...

  10. iOS 开发遇到的问题之（nil指针对NSDictionary及NSArray初始化的影响）

    nil指针对NSDictionary及NSArray初始化的影响 最近在做项目的时候遇到一个挺坑的崩溃问题,是由于NSDictionary初始化时nil指针引起的崩溃.假设我们现在要初始化一个{key ...