Win10系列：JavaScript 模板绑定
Posted 冯瑞涛（2009年已经停止更新）请加微信：iterryfen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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上单击右键，选择"添加"à"现有项"，在本地文件夹中选择六张图片并添加到项目中。
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.Namespace.define("BindingUsingTemplate",{
接下来打开default.html文件，在其中添加WinJS库模板和ListView控件，WinJS库模板用于设置数据的显示格式，而ListView控件用于显示数据。代码片段如下所示：
<div id="FoodTemplate" data-win-control="WinJS.Binding.Template">
<img src="#" class="pictureStyle" data-win-bind="src: picture" />
<h4 class="titleStyle" data-win-bind="innerText: name"></h4>
<div data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource: BindingUsingTemplate.foodDetailName.dataSource,
layout: { type: WinJS.UI.GridLayout }
为了控制界面元素的显示位置和外观，在default.css文件中设置相应的样式属性，代码片段如下所示：
/*设置class属性值为itemStyle的元素的大小、边距等属性*/
/*设置class属性值为pictureStyle的元素的大小、边距、位置等属性*/
/*设置class属性值为titleStyle的元素的边距、位置等属性*/
上面的代码分为三个部分，分别设计了菜肴整体信息、菜肴图片、菜肴名称的样式。
启动调试，可以看到在应用程序界面上以网格布局方式显示图片和文本，效果如图19-12所示。
以上是关于Win10系列：JavaScript 模板绑定的主要内容，如果未能解决你的问题，请参考以下文章