time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > 【WinJS开发教程】2、使用artTemplate打造对话列表实例

【WinJS开发教程】2、使用artTemplate打造对话列表实例

时间:2012-12-28 21:40 点击:4783次 字体:[ ]




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

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

【WinJS开发教程】2、使用artTemplate打造对话列表实例_www.fengfly.com

由于是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风格的资源。



本文地址 : http://www.fengfly.com/plus/view-211192-1.html
标签: 开发教程 实例 WinJS artTemplate 对话列表
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: