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} <div class='replies' style='float:right;'> <div class='{echo item.color}'> <span class='sticker sticker-right {echo item.stickercolor}'></span> {else} <div class='replies' style='float:left;'> <div class='{echo item.color}'> <span class='sticker sticker-left {echo item.stickercolor}'></span> {/if} <div class="rely"> <div class="author">{echo item.author}</div> <div class="text">{echo item.content}</div> </div> </div> </div> {/each} </script>
{关键字}，其实each、if、else、index、echo等是artTemplate自带的关键，一看就知道是什么意思（即便没有编程经验）
这里如果当前数据的索引为偶数，我们就让对话框居右显示，否则居左，同样对于箭头的方向也是。
本文的所有代码可以在新浪微盘中找到，点击下载.
其中样式使用了MetroUI，下面文章介绍WinJS中可用的Windows 8风格的资源。