ArtTemplate使用笔记

最新推荐文章于 2024-08-05 22:07:47 发布

转载最新推荐文章于 2024-08-05 22:07:47 发布 · 834 阅读

Javascript 专栏收录该内容

3 篇文章

订阅专栏

1.basic

[html]view plaincopyprint? 
   
 <!DOCTYPE HTML>  
 <html><head><meta charset="UTF-8"><title>demo</title>  
 <script src="../template.js"></script>  
 </head>  
 <body>  
 <div id="content"></div>  
 <script id="test" type="text/html">  
 <% if (isAdmin) { %>  
   
 <h1><%=title%></h1>  
 <ul>  
     <% for (var i = 0; i < list.length; i ++) { %>  
         <li>索引 <%= i + 1 %>. <%= list[i] %></li>  
     <% } %>  
 </ul>  
   
 <% } %>  
 </script>  
   
 <script>  
 var data = {  
     title: '基本例子',  
     isAdmin: true,  
     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']  
 };  
 var html = template.render('test', data);  
 document.getElementById('content').innerHTML = html;  
 </script>  
 </body>  
 </html>  

2.使用语法工具

[html]view plaincopyprint? 
   
 <!DOCTYPE HTML>  
 <html><head><meta charset="UTF-8"><title>demo</title>  
 <script src="../template.js"></script>  
 <script src="../extensions/template-syntax.js"></script>  
 <script id="test" type="text/html">  
 {if isAdmin}   
   
 <h1>{title}</h1>  
 <ul>  
 {each list}  
    <li>索引{$index}. {$value}</li>  
 {/each}  
 </ul>  
   
 {/if}  
 </script>  
 <script>  
 var data = {  
     title: '基本例子',  
     isAdmin: true,  
     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']  
 };  
 var html = template.render('test', data);  
 document.getElementById('content').innerHTML = html;  
 </script>  
 </body>  
 </html>  

3.循环each的另一种写法——{each list as item index }，这种很有用，我后来才知道。

[html]view plaincopyprint? 
   
 <!DOCTYPE HTML>  
 <html><head><meta charset="UTF-8"><title>demo</title>  
 <script src="../template.js"></script>  
 <script src="../extensions/template-syntax.js"></script>  
 </head>  
 <body>  
 <div id="content"></div>  
 <script id="test" type="text/html">  
 {if isAdmin}   
   
 <h1>{title}</h1>  
 <ul>  
     {each list as item index}  
         <li>索引index.item</li>  
     {/each}  
 </ul>  
   
 {/if}  
 </script>  
   
 <script>  
 var data = {  
     title: '基本例子',  
     isAdmin: true,  
     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']  
 };  
 var html = template.render('test', data);  
 document.getElementById('content').innerHTML = html;  
 </script>  
 </body>  
 </html>  

4.使用外部模板——include。

基本语法：

1.原始写法 <%include('外部模板名',[可选数据])%>；

2.使用语法工具 {include '外部模板名' [可选数据] }。

这里的可选数据在糖饼的文档和例子里没有具体介绍，但是根据源码分析后，可以按照下面方式操作。

[html]view plaincopyprint? 
   
 <!DOCTYPE HTML>  
 <html><head><meta charset="UTF-8"><title>demo</title>  
 <script src="../template.js"></script>  
 <script src="../extensions/template-syntax.js"></script>  
 </head>  
 <body>  
 <table id="content"></table>  
 <script id="inside" type="text/html">  
     {each list as insideItem insideIndex}  
         <li>索引 {echo insideIndex} {echo insideItem.name}</li>  
     {/each}  
 </script>  
   
 <script id="outside" type="text/html">  
 {each example as item index }  
       
     {if item.isAdmin}  
         <tr>  
             <td>true:{echo item.title}</td>  
             <td>  
                 {include 'inside' item}  
             </td>  
         </tr>  
     {else}  
         <tr>  
             <td>false:{echo item.title}</td>  
             <td>  
                 {include 'inside' item}  
             </td>  
         </tr>  
     {/if}  
       
 {/each}  
 </script>  
 <script>  
 /*  
     {$index}: {$value.name}  
 */  
 var data = {  
     example:  
         [{  
             title: '基本例子1',  
             isAdmin: true,  
             list: [  
                 {name:'文艺1'},   
                 {name:'博客1'},   
                 {name:'摄影1'},   
                 {name:'电影22'},   
                 {name:'民谣1'},   
                 {name:'旅行1'},   
                 {name:'吉他1'}  
             ]  
         },{  
             title: '基本例子2',  
             isAdmin: false,  
             list: [  
                 {name:'文艺2'},   
                 {name:'博客2'},   
                 {name:'摄影2'},   
                 {name:'电影2'},   
                 {name:'民谣3'},   
                 {name:'旅行2'},   
                 {name:'吉他2'}  
             ]  
         }]  
       
     };  
 var html = template.render('outside', data);  
 document.getElementById('content').innerHTML = html;  
 </script>  
 </body>  