```
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>5使用artTemplate</title>
<!--weui.css僅為快速的做出頁面，可刪除-->
<link rel="stylesheet" href="http://me.52fhy.com/demo/jstemp/static/weui.css"/>
<script src="static/zepto.min.js"></script>
<!--artTemplate.js-->
<script src="static/artTemplet/template.js"></script>
</head>
<body>
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">文章列表</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
<!--模板: 注意這里模板與前面的示例不一樣了，直接使用一個type="text/html"的script標簽存放模板-->
<script id="js-tmp" type="text/html">
<div class="weui_media_box weui_media_text">
<a href="{{ url }}" class="" target="_blank">
<h4 class="weui_media_title">{{ title }}</h4>
</a>
<p class="weui_media_desc">{{ desc }}</p>
</div>
</script>
<!--/模板-->
<script type="text/javascript">
/*
artTemplate-3.0 新一代 javascript 模板引擎
https://github.com/aui/artTemplate
template.js (簡潔語法版, 2.7kb)
支持if等語句{{ if admin }} {{/if}}
template(id, data)
根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。
如果沒有 data 參數，那么將返回一渲染函數。
性能卓越，執行速度通常是 Mustache 與 tmpl 的 20 多倍（性能測試）
支持運行時調試，可精確定位異常模板所在語句（演示）
對 NodeJS Express 友好支持
安全，默認對輸出進行轉義、在沙箱中運行編譯后的代碼（Node版本可以安全執行用戶上傳的模板）
支持include語句
可在瀏覽器端實現按路徑加載模板（詳情）
支持預編譯，可將模板轉換成為非常精簡的 js 文件
模板語句簡潔，無需前綴引用數據，有簡潔版本與原生語法版本可選
支持所有流行的瀏覽器
*/
$(function(){
$.ajax({
url: 'static/blog.json',
type: 'get',
dataType: 'json',
success: function (response) {
var htmlList = '';
var data = response.list;
//本例不再需要手動取模板內容
//var htmlTemp = $("textarea.js-tmp").val();
$.each(data, function(i,el) {
//htmlList += htmlTemp.temp(el);
//htmlList += laytpl(htmlTemp).render(el);
//htmlList += _.template(htmlTemp)(el);
htmlList += template("js-tmp", el); //注意第一個參數是id
});
$('.js-blog-list').empty().append(htmlList);
},
error: function (jqXHR, textStatus, errorThrown) {
if (textStatus == 'timeout') {
alert('請求超時');
return false;
}
console.log(jqXHR.responseText);
}
});
});
</script>
</body>
```
