javascript模板引擎——artTemplate

最新推荐文章于 2025-06-08 09:09:24 发布

zb872676223

最新推荐文章于 2025-06-08 09:09:24 发布

阅读量622

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍 ArtTemplate 模板引擎的基本用法，包括如何编写模板语法、渲染模板数据及嵌入子模板等高级特性。同时展示了如何通过自定义语法实现更灵活的模板结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地址：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>

[html]view plaincopy 
   
 <!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>  

更多请见官网...