Arttemplate引擎模版实例应用

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.考查获取的数据结构

本次获取的天气数据来源于彩云天气（http://wiki.swarma.net/index.php/%E5%BD%A9%E4%BA%91%E5%A4%A9%E6%B0%94API/v2）在其提供的API文档中可以看到JSON数据。

{
    "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.编辑渲染模板

定义一个函数名为detail24(data),按照（http://aui.github.io/artTemplate/）demo中顺序进行渲染。

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.展示效果

在移动设备上运行效果