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風格的資源。

?

總結

以上是生活随笔為你收集整理的WinJS实用开发技巧（2）：使用artTemplate打造对话列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。