首页 > 代码库 > Win10系列：JavaScript 模板绑定
Win10系列：JavaScript 模板绑定
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="http://www.mamicode.com/#" 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 模板绑定