地址:https://github.com/aui/artTemplate
https://github.com/aui/artTemplate/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95%E6%89%A9%E5%B1%95%E8%AF%B4%E6%98%8E
编写模板
使用一个type="text/html"
的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>
模板逻辑语法开始与结束的界定符号为<%
与%>
,若<%
后面紧跟=
号则输出变量内容。
渲染模板
template.render(id, data)
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test', data);
document.getElementById('content').innerHTML = html;
嵌入子模板
<%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>
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>include demo</title>
- <script src="template.js"></script>
- </head>
-
- <body>
- <div id="content"></div>
- <div id="tagcontent"></div>
- <script id="targettemplate" type="text/html">
- <h1><%=title%></h1>
- <%include('list')%>
- <%include('Tvalue')%>
- </script>
- <script id="list" type="text/html">
- <ul>
- <%for(var i=0; i<listItems.length; i++){%>
- <li>条目内容<%=i+1%> : <%=listItems[i]%></li>
- <%}%>
- </ul>
- </script>
- <script id="Tvalue" type="text/html">
- <p>不转义:<%==trans%> or <%=#trans%></p>
- <p>默认转义: <%=trans%></p>
- </script>
-
- <script>
- var data = {
- title: '嵌入子模板',
- listItems: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'],
- trans:'<label style="color:#F00; font-weight:bold;">hello world!</label>'
- };
- var logintsorse='<h3>template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的,'
- +'如果使用了 id 参数,可以使用template.render(id, data)渲染模板。</h3>'
- +'使用arttemplate来编写:<%=title%>';
-
- var html = template.render('targettemplate', data);
-
- var render = template.compile(logintsorse);
- var compilehtml = render(data);
-
- document.getElementById('content').innerHTML = html+compilehtml;
- </script>
-
- <script id="customTag" type="text/html">
- <h1></h1>
- <ul>
-
- <li>条目内容 : </li>
-
- </ul>
- </script>
- <script>
- template.openTag = '<!--[';
- template.closeTag = ']-->';
- var listdata = {
- header : 'your study list',
- tag : ['算法导论','linq','c#','jquery','django','python']
- };
- var resulthtml = template.render ('customTag', listdata);
- document.getElementById('tagcontent').innerHTML = resulthtml;
-
- //
- </script>
- </body>
-
- </html>
更多请见官网...