javascript模板引擎——artTemplate

来源：互联网发布：霸王之心翅膀升级数据编辑：程序博客网时间：2024/05/22 08:22

地址：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><!--[= header]--></h1><ul><!--[for(var i=0; i<tag.length; i++){]--><li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></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>

更多请见官网...

4 0