JS模板引擎---腾讯artTemplate的使用

来源：互联网发布：股票行情数据接口编辑：程序博客网时间：2024/05/18 20:12

常见的模板插件有百度开发的(BaiduTemplate) ArtTemplate(腾讯开发) velocity.js(淘宝开发) Handlebars 等。
我学习了一下ArtTemplate。简单总结一下学习的ArtTemplate的知识。

语法：

art-template同时支持两种模板语法，标准语法和原始语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

标准语法：

格式为{{ }}, 输出语法的例子：{{value}}、{{data.key}}、{{data[‘key’]}}、 {{a||b}}

原始语法：
格式为{% %}的形式，输出语法的例子如{{= value}}、{{%= data.key%}}、{{%= data[‘key’]%}}、{{% = a||b%}}

刚才举的例子是输出语法的形式，也就是说art-template还有其他语法的形式，如条件、循环、变量等，具体可以查看文档。https://aui.github.io/art-template/docs/syntax.html

核心方法

基于模板名渲染模板
template(filename, data);

将模板源代码编译成函数
template.compile(source, options);

将模板源代码编译成函数并立刻执行
template.render(source, data, options);

使用方法

用一个例子来实践art-template的使用方式。
第一步：引入js文件

<script type="text/javascript" src="js/template-native.js"></script>

第二步：定义模板

<script id="test" type="text/html">    <h1><%=title%></h1>    <ul>        <%for (var i =0;i<list.length;i++){%>            <li>索引<%=i+1%>:<%=list[i]%></li>        <% } %>    </ul></script>

第三步：定义数据对象

<script>        var data ={    title:"artTemplate",    isTemplate:"true",    list:['读书', '听歌', '摄影', '旅行', '跑步', '爬山', '骑行']};    </script>

第四步调用模板引擎提供的方法，找到并替换。
注意：这一步骤是写在定义对象的<script></script>标签内的

//        调用模板引擎提供的方法     /*   参数1：模板的id        参数2：对象（注意是  对象）*/        var html = template('test',data);        //找到并替换        document.getElementById('content').innerHTML = html;

具体例子演示：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>template使用</title>    <!--导入引擎模板-->    <script src="js/template-native.js"></script></head><body><div id="content"></div>    <!--定义模板-->     <script id="test" type="text/html">         <h1><%=title%></h1>         <ul>             <%for (var i =0;i<list.length;i++){%>                 <li>索引<%=i+1%>:<%=list[i]%></li>             <% } %>         </ul>     </script>  <!--定义对象-->    <script>        var data ={            title:"artTemplate",            isTemplate:"true",            list:['读书', '听歌', '摄影', '旅行', '跑步', '爬山', '骑行']        };//        调用模板引擎提供的方法     /*   参数1：模板的id        参数2：对象（注意是  对象）*/        var html = template('test',data);        //找到并替换        document.getElementById('content').innerHTML = html;    </script>

结果：
这里写图片描述

这要要说明一点，使用template()方法的时候，参数2 一定要传入对象，对象！
如果数据是数组的话，就要包装成对象，举个例子。返回的是arrA 数组，可以这样包装

var obj={   data:arrA};

使用模板引擎对于从后台返回的json数据，显示到html页面中是非常方便的。举个例子，用jQuery中的ajax发送请求。关于ajax请求数据，我的博客中也有介绍。点击可查看：jQuery中的ajax操作

<!--导入js插件 模板插件--><script type="text/javascript" src="js/template-native.js"></script><!--导入jQuery--><script type="text/javascript" src="js/jquery.min.js"></script><!--定义模板--><script type="text/html" id="template">    <%for (var i =1; i<items.length;i++){%>    <div class="item">        <a href="#" class="cover"><img src="<%=items[i].path%>"></a>        <div class="bottom">            <a href="#"><%=items[i].name%></a>            <div class="rightBox">                <span class="icon-heart">阅读：<%=items[i].star%></span>                <span class="icon-commit">评论：<%=items[i].message%></span>            </div>        </div>    </div>    <%}%></script><!--自己的代码--><script type="text/javascript">    $(function () {        $(".getMore").click(function () {            // 使用jQuery 发送ajax请求            $.ajax({                url:'artTem.php',                type:'get',                success:function (data) {                    console.log(data);                    // 转化为js对象 数组                    var jsArr = JSON.parse(data);                    // 包装为js对象                    var obj ={                        items:jsArr                    };                    // 调用模板引擎的方法，填充数据                    var result = template('template',obj);                    $('.container').append(result);                }            });        });    });</script>

json数据

[  {    "path":"images/1.jpg",    "name":" 那阳光，灿烂到心底",    "star":"6977",    "message":"188"  },{  "path":"images/2.jpg",  "name":" 守望者",  "star":"9012",  "message":"188"},{  "path":"images/3.jpg",  "name":" 日落黄昏时",  "star":"9012",  "message":"188"}]

php页面

<?php   //读取json 并返回给浏览器   echo file_get_contents('data/data.json');?>

阅读全文

0 0