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 使用模板绑定数据的效果

Win10系列：JavaScript 模板绑定的更多相关文章

  1. Windows Store App JavaScript 开发：模板绑定

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

  2. Win10系列：JavaScript 数据绑定

    使用数据绑定可以使页面中元素的属性值与数据源中的数据同步,其中数据源可以来自数据库.文件以及自定义的数据等.在常用的数据绑定方法中,简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定,模板绑 ...

  3. Win10系列：JavaScript 的 WinJS库

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

  4. Win10系列：JavaScript小球运动示例

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

  5. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  6. Knockout应用开发指南 第四章：模板绑定

    原文:Knockout应用开发指南 第四章:模板绑定 模板绑定The template binding 目的 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方 ...

  7. Knockout学习之模板绑定器

    模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...

  8. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  9. JavaScript模板引擎原理

    JavaScript模板引擎原理,几行代码的事儿 2013-12-03 16:35 by BarretLee, 650 阅读, 6 评论, 收藏, 编辑 一.前言 什么是模板引擎,说的简单点,就是一个 ...

随机推荐

  1. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

  2. 力扣（LeetCode）292. Nim游戏 巴什博奕

    你和你的朋友,两个人一起玩 Nim游戏:桌子上有一堆石头,每次你们轮流拿掉 1 - 3 块石头. 拿掉最后一块石头的人就是获胜者.你作为先手. 你们是聪明人,每一步都是最优解. 编写一个函数,来判断你 ...

  3. vue面试

    1.一个比较全的vue面试题 http://www.bslxx.com/p/3187.html

  4. Linux中系统检测工具top命令

    Linux中系统检测工具top命令 本文转自:https://www.cnblogs.com/zhoug2020/p/6336453.html 首先介绍top中一些字段的含义: VIRT:virtua ...

  5. 用R的dgCMatrix包来构建稀疏矩阵 | sparse matrix by dgCMatrix

    sparse matrix是用来存储大型稀疏矩阵用得,单细胞表达数据基本都用这个格式来存储,因为单细胞很大部分都是0,用普通文本矩阵存储太占空间. 使用也是相当简单: library("Ma ...

  6. 关于sparksql操作hive，读取本地csv文件并以parquet的形式装入hive中

    说明:spark版本:2.2.0 hive版本:1.2.1 需求: 有本地csv格式的一个文件,格式为${当天日期}visit.txt,例如20180707visit.txt,现在需要将其通过spar ...

  7. No address associated with hostname

    java.net.UnknownHostException: Unable to resolve host "www.baidu.com": No address associat ...

  8. android -------- 混淆打包报错(warning - InnerClass annotations are missing corresponding EnclosingMember annotations)

    最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations ...

  9. vue 基础（一）

    一 vue.js的M-V-VM思想 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式. 1.Model指代的就是vue对象的data属性里面的数据.这里的数 ...

  10. 【模板/经典题型】树上第k大

    直接对树dfs一发,对每个节点建出主席树. 查询的时候主席树上二分,四个参数x+y-lca(x,y)-fa[lca(x,y)]. 如果要求支持动态加边的话,只需要一个启发式合并即可,每次暴力重构主席树 ...