1. 程式人生 > >javascript模板引擎 artTemplate

javascript模板引擎 artTemplate

1.簡單操作1
<script src="template.js"></script>
<script id="test" type="text/html">
<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>條目內容 <%=i + 1%> :<%=list[i]%></li>
    <%}%>
</ul>
</script>
<div id="content"></div>
<script>
var data = {
    title: '標籤',
    list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template.render('test', data);
document.getElementById('content').innerHTML = html;
</script>
2.簡單操作2
<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<%for(var i=0;i < list.length; i++) { %><div><%=i%>:<%=list[i]%><div><%}%>';
var render = template.compile(source);
var data = {
    title: '標籤',
    list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
3.新增輔助函式
<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<%for(var i=0;i < list.length; i++) { %><div><%=i%>:<%=list[i]%><div><%}%><%=myHelper()%>';
var render = template.compile(source);
var data = {
    title: '標籤',
    list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他']
};
function helper(a){
    alert(a)
    //自定義內容    
}
template.helper('myHelper',helper(new Date())); //helper函式名稱
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
4.設定界定符
若前端模板語法與後端語法產生衝突,可以修改模板引擎界定符,例如:
template.openTag = "<!--[";
template.closeTag = "]-->";

<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<h1>{{=title}}</h1>';
template.openTag  = '{{'; //開始定界符
template.closeTag  = '}}';//結束定界符
var render = template.compile(source);
var data = {
    title: '標籤',
};
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
5.嵌入子模板
<%include(id, [data])%>語句可以嵌入子模板,其中第二個引數是可選的,它預設傳入當前的資料。
<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script>
<script id="list" type="text/html">
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>條目內容 <%=i + 1%> :<%=list[i]%></li>
    <%}%>
</ul>
</script>
5.自定義語法 for if elseif

<script src="template.js"></script>
<script >
var source = '<%if ( tag  == 1 ) {%><h1>1</h1><%} else {%><h1>-1</h1><% } %>'; //if使用
var render = template.compile(source);
var data = {
    tag: 1,
};
var html = render(data);
document.getElementById("content").innerHTML=html;

</script>