ArtTemplate使用笔记

来源：互联网发布：c语言乘法口诀编辑：程序博客网时间：2024/04/25 06:02

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>  

0 0