常見的模板插件有 百度開發的(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');
?>
