JS模板引擎---腾讯artTemplate的使用
常见的模板插件有 百度开发的(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">
<%=title%>
<%for (var i =0;i<list.length;i++){%>
- 索引<%=i+1%>:<%=list[i]%>
<% } %>
script>第三步：定义数据对象
<script>
var data ={
title:"artTemplate",
isTemplate:"true",
list:['读书', '听歌', '摄影', '旅行', '跑步', '爬山', '骑行']
};
script>第四步 调用模板引擎提供的方法 ，找到并替换 。
注意：这一步骤是写在定义对象的标签内的
// 调用模板引擎提供的方法
/* 参数1：模板的id
参数2：对象（注意是 对象）*/
var html = template('test',data);
//找到并替换
document.getElementById('content').innerHTML = 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">
<%=title%>h1>
<ul>
<%for (var i =0;i
<% } %>
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操作
<script type="text/javascript" src="js/template-native.js">script>
<script type="text/javascript" src="js/jquery.min.js">script>
<script type="text/html" id="template">
<%for (var i =1; i
<%=items[i].name%>
阅读：<%=items[i].star%>
评论：<%=items[i].message%>
<%}%>
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页面
//读取json 并返回给浏览器
echo file_get_contents('data/data.json');
?>