WinJS实用开发技巧（2）：使用artTemplate打造对话列表

WinJS中提供了列表控件ListView，但是对于一些有一些逻辑判断的处理不是十分友好，我们可以使用JavaScript中的模版机制来自己生成列表，然后添加到DOM中。今天要讲的是artTemplate, artTemplate提供一个是否简单的语法并且性能十分不错，有兴趣的可以去Github上查看相关细节。

先来看看最终的运行效果:

由于是demo，所以数据结构很简单：

var comment = function (username, content) {
this.author = username;
this.content = content;
};

一个包含用户名以及评论内容的数据接口，如上图代码所示。当然还有两个属性是动态添加进去的，即背景颜色以及三角颜色。

下面的代码是示例数据源：

var list = [];
list.push(new comment("Alexis", "揭秘《泰囧》最美人妖Rose人养成记】贺岁档爆笑电影《泰囧》近期热映，片中不仅有徐峥、王宝强、黄渤三位搞笑大咖联手耍宝卖萌"));
list.push(new comment("Tom", "【毫不动摇】12月21日，随着中国民主促进会第十一次全国代表大会在北京闭幕，中国八个民主党派五年一次的集中换届圆满落下帷幕"));
list.push(new comment("Mahoo", "州市委书记陈德荣说：上次（今年5月）我说塘河治理好了"));
list.push(new comment("laozhao", "今天开始，卓正诊所每周推出一位医生，帮大家解答健康方面的各种问题"));
list.push(new comment("shuifeng", "粉佳人Pink演唱大热单曲《Try》超清现场！喜欢这首歌真的已经不需要任何语言去形容了！"));
list.push(new comment("程序员的那些事", "《诊断Java.lang.OutOfMemoryError》一旦堆内存的实际使用量超过其所允许的堆空间，就会产生堆内存压力。而这将导致频繁的全面垃圾回收事件，垃圾回收将窃取CPU周期，轻则导致响应时间延迟，重则导致必须重新启动Java虚拟机才能解决的内存溢出错误。"));
list.push(new comment("大街网", "致明日考级的斗士们！"));
list.push(new comment("IBM", "这20大梦幻般技术 5年内有望实现】"));
list.push(new comment("Google", "Glass is awesome!!!"));
list.push(new comment("Alexis", "揭秘《泰囧》最美人妖Rose人养成记】贺岁档爆笑电影《泰囧》近期热映，片中不仅有徐峥、王宝强、黄渤三位搞笑大咖联手耍宝卖萌"));
list.push(new comment("Tom", "【毫不动摇】12月21日，随着中国民主促进会第十一次全国代表大会在北京闭幕，中国八个民主党派五年一次的集中换届圆满落下帷幕"));
list.push(new comment("Mahoo", "州市委书记陈德荣说：上次（今年5月）我说塘河治理好了"));
list.push(new comment("laozhao", "今天开始，卓正诊所每周推出一位医生，帮大家解答健康方面的各种问题"));
list.push(new comment("shuifeng", "粉佳人Pink演唱大热单曲《Try》超清现场！喜欢这首歌真的已经不需要任何语言去形容了！"));
list.push(new comment("程序员的那些事", "《诊断Java.lang.OutOfMemoryError》一旦堆内存的实际使用量超过其所允许的堆空间，就会产生堆内存压力。而这将导致频繁的全面垃圾回收事件，垃圾回收将窃取CPU周期，轻则导致响应时间延迟，重则导致必须重新启动Java虚拟机才能解决的内存溢出错误。"));
list.push(new comment("大街网", "致明日考级的斗士们！"));
list.push(new comment("IBM", "这20大梦幻般技术 5年内有望实现】"));
list.push(new comment("Google", "Glass is awesome!!!"));
list.push(new comment("Alexis", "揭秘《泰囧》最美人妖Rose人养成记】贺岁档爆笑电影《泰囧》近期热映，片中不仅有徐峥、王宝强、黄渤三位搞笑大咖联手耍宝卖萌"));
list.push(new comment("Tom", "【毫不动摇】12月21日，随着中国民主促进会第十一次全国代表大会在北京闭幕，中国八个民主党派五年一次的集中换届圆满落下帷幕"));
list.push(new comment("Mahoo", "州市委书记陈德荣说：上次（今年5月）我说塘河治理好了"));
list.push(new comment("laozhao", "今天开始，卓正诊所每周推出一位医生，帮大家解答健康方面的各种问题"));
list.push(new comment("shuifeng", "粉佳人Pink演唱大热单曲《Try》超清现场！喜欢这首歌真的已经不需要任何语言去形容了！"));
list.push(new comment("程序员的那些事", "《诊断Java.lang.OutOfMemoryError》一旦堆内存的实际使用量超过其所允许的堆空间，就会产生堆内存压力。而这将导致频繁的全面垃圾回收事件，垃圾回收将窃取CPU周期，轻则导致响应时间延迟，重则导致必须重新启动Java虚拟机才能解决的内存溢出错误。"));
list.push(new comment("大街网", "致明日考级的斗士们！"));
list.push(new comment("IBM", "这20大梦幻般技术 5年内有望实现】"));
list.push(new comment("Google", "Glass is awesome!!!"));
var colors = [
'blue',
'blueDark',
'green',
'greenLight',
'greenDark',
'red',
'yellow',
'orange',
'orangeDark',
'pink',
'pinkDark',
'purple',
];
var lenght = colors.length;
for (var i = 0; i < list.length; i++) {
var index = Math.floor(Math.random() * (lenght - 1));
list[i].color = 'bg-color-' + colors[index];
list[i].stickercolor = 'sticker-color-' + colors[index];
}
var data = {
items: list
}

那么我们怎么使用Template插件将生成的html文本附加渲染到DOM中？

在Body中新建一个id为container的div，使用jQuery获取到该节点，然后使用jQuery函数append进去即可。

<div id="container">
div>

$('#container').append(template('DT_Template', data));

接下来是模版的样子是什么样的，开头说到artTemplate的语法十分简单，看下面的代码就知道了：

<script src="/js/jquery-1.8.3.js">script>
<script src="/js/template.js">script>
<script src="/js/template-syntax.js">script>
<script id="DT_Template" type="text/template">
{each items as item index}
{if index%2==1}



{else}



{/if}

{echo item.author}
{echo item.content}



{/each}
script>

{关键字}，其实each、if、else、index、echo等是artTemplate自带的关键，一看就知道是什么意思（即便没有编程经验）

这里如果当前数据的索引为偶数，我们就让对话框居右显示，否则居左，同样对于箭头的方向也是。

本文的所有代码可以在新浪微盘中找到，点击下载.

其中样式使用了MetroUI，下面文章介绍WinJS中可用的Windows 8风格的资源。