Arttemplate是新一代 javascript 模板引擎，由編寫模版和渲染模版組成。
實際的需求是一個天氣app中，從介面中取出所需要的資料進行重新組裝，迴圈遍歷出來顯示在一個html中，從而獲得資料的快速更新和展示。

1.從資料介面中接受資料

url = "https://api.caiyunapp.com/v2/Y2FpeXVuIGFwaSB3ZWI/" + jw + "/forecast.json?callback=showLocation";
        $.jsonp({
            url: url,
            callback: 'showLocation'
 
,
            success: function(result) {
                $(".wea-detailbox .wea-detail").text(result.result.hourly.description);
                var newData = createDailyData(result);
                if("temperature" === id) {
                    highChartModule.weather(result)
                    daily(newData);
                    //接受資料
 

                    detail24(result);
                }else if("pm25" === id) {
                    highChartModule.pm25(result);               

2.考查獲取的資料結構

{
    "status":"ok",
    "lang":"zh_CN", //目前只支援簡體中文（zh_CN、zh_SG）、繁體中文（zh_TW、zh_HK），英語（en_US、en_GB）在測試中
    "server_time":1443418212,
    "tzshift"
 
:28800, //時區的偏移秒數，如東八區就是 28800 秒，使用秒是為了支援像尼泊爾這樣的差 5 小時 45 分鐘的地區，它們有非整齊的偏移量
    "location":[
        25.1552, //緯度
        121.6544 //經度
    ],
    "unit":"metric", //目前只支援米制（metric）和科學計量法（SI），英制還有待開發
    "result":{
        "status":"ok",
        "hourly":{ //小時級預報，涵蓋從當前開始的未來 48 小時
            "status":"ok",
            "pm25":[ //pm25
                {
                    "value":8.0,
                    "datetime":"2015-09-28 13:00"
                },
                {
                    "value":8.0,
                    "datetime":"2015-09-28 14:00"
                },
                {
                    "value":7.0,
                    "datetime":"2015-09-28 15:00"
                },

因為業務的需要，我們需要提取其中的“datetime”.”temprature.value”和”skycon.value”.

3.編輯渲染模板

function detail24(data){
        //需要的資料定義成物件
        var temperatures = data.result.hourly.temperature;
        var skycon = data.result.hourly.skycon;
        var newData = [];
        for(i=0,len=temperatures.length; i<10; i++) {
            //迴圈遍歷，資料組裝
            var obj = {
                'datetime':temperatures[i].datetime,
                'sky':skycon[i].value,
                'tem':temperatures[i].value
            };
            //重新組裝的資料放入陣列中
            newData.push(obj);
            //獲取到的天氣資訊替換成中文
            obj.sky = skycons[obj.sky];
        }           
        var list = {list:newData};
        console.log(JSON.stringify(list));
        var html = template("daily-html-24",list);
        document.getElementById("content").innerHTML = html;    
    }

4.使用script標籤存放模板

在一個html中編輯一個js模版和一個DIV，用於現實和存放需要展示出來的資料樣式。注意二者的格式和位置。js模版要單獨編寫，不能寫在一個div標籤中。
DIV容器（引入樣式和ＩＤ）：

<div class="detail24" id="content"> 

            </div>

JS模版：

<script type="text/html" id="daily-html-24">
            <ul>
                {{each list as value i}}
                <li>
                    <div>{{value.datetime.substr(-5)}}</div>
                    <div class="real-time">{{value.sky}}</div>
                    <div><span>{{value.tem}}</span>°</div>
                </li>
                {{/each}}
            </ul>
        </script>

渲染模版中template(“daily-html-24”,list)中的ID為js模版中的ID，document.getElementById(“content”).innerHTML = html中的ID為DIV中的ID。

5.展示效果

在移動裝置上執行效果