常见的模板插件有 百度开发的(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');
?>