1.basic
4.使用外部模板——include。
<!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.使用语法工具
<!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 },这种很有用,我后来才知道。
<!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 '外部模板名' [可选数据] }。
这里的可选数据在糖饼的文档和例子里没有具体介绍,但是根据源码分析后,可以按照下面方式操作。
<!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>
</html>