ArtTemplate使用笔记

1.basic

<!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>

ArtTemplate使用笔记

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

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

猜你喜欢