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容器(引入样式和ID):

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

            div>

JS模版:

<script type="text/html" id="daily-html-24">
            
    {{each list as value i}}
  • <div>{{value.datetime.substr(-5)}}</div>
    {{value.sky}}</div>
    {{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.展示效果

在移动设备上运行效果
Arttemplate引擎模版实例应用_第1张图片

你可能感兴趣的:(移动端App)