来源：http://blog.csdn.net/joyhen/article/details/21233525
编写模板
使用一个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> 1 编写模板
2
3 使用一个type="text/html"的script标签存放模板：
4
5 <script id="test" type="text/html">
6 <h1><%=title%></h1>
7 <ul>
8 <%for(i = 0; i < list.length; i ++) {%>
9 <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
10 <%}%>
11 </ul>
12 </script>
13 模板逻辑语法开始与结束的界定符号为<% 与%>，若<%后面紧跟=号则输出变量内容。
14
15 渲染模板
16
17 template.render(id, data)
18
19 var data = {
20 title: ‘标签‘,
21 list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]
22 };
23 var html = template.render(‘test‘, data);
24 document.getElementById(‘content‘).innerHTML = html;
25 嵌入子模板
26
27 <%include(id, [data])%>语句可以嵌入子模板，其中第二个参数是可选的，它默认传入当前的数据。
28
29 <script id="test" type="text/html">
30 <h1><%=title%></h1>
31 <%include(‘list‘)%>
32 </script>
33
34 <script id="list" type="text/html">
35 <ul>
36 <%for(i = 0; i < list.length; i ++) {%>
37 <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
38 <%}%>
39 </ul>
40 </script>
41 [html] view plain copy 在CODE上查看代码片派生到我的代码片
42 <!doctype html>
43 <html>
44 <head>
45 <meta charset="UTF-8">
46 <title>include demo</title>
47 <script src="template.js"></script>
48 </head>
49
50 <body>
51 <div id="content"></div>
52 <div id="tagcontent"></div>
53 <script id="targettemplate" type="text/html">
54 <h1><%=title%></h1>
55 <%include(‘list‘)%>
56 <%include(‘Tvalue‘)%>
57 </script>
58 <script id="list" type="text/html">
59 <ul>
60 <%for(var i=0; i<listItems.length; i++){%>
61 <li>条目内容<%=i+1%> : <%=listItems[i]%></li>
62 <%}%>
63 </ul>
64 </script>
65 <script id="Tvalue" type="text/html">
66 <p>不转义:<%==trans%> or <%=#trans%></p>
67 <p>默认转义: <%=trans%></p>
68 </script>
69
70 <script>
71 var data = {
72 title: ‘嵌入子模板‘,
73 listItems: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘],
74 trans:‘<label style="color:#F00; font-weight:bold;">hello world!</label>‘
75 };
76 var logintsorse=‘<h3>template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的，‘
77 +‘如果使用了 id 参数，可以使用template.render(id, data)渲染模板。</h3>‘
78 +‘使用arttemplate来编写：<%=title%>‘;
79
80 var html = template.render(‘targettemplate‘, data);
81
82 var render = template.compile(logintsorse);
83 var compilehtml = render(data);
84
85 document.getElementById(‘content‘).innerHTML = html+compilehtml;
86 </script>
87
88 <script id="customTag" type="text/html">
89 <h1><!--[= header]--></h1>
90 <ul>
91 <!--[for(var i=0; i<tag.length; i++){]-->
92 <li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></li>
93 <!--[}]-->
94 </ul>
95 </script>
96 <script>
97 template.openTag = ‘<!--[‘;
98 template.closeTag = ‘]-->‘;
99 var listdata = {
100 header : ‘your study list‘,
101 tag : [‘算法导论‘,‘linq‘,‘c#‘,‘jquery‘,‘django‘,‘python‘]
102 };
103 var resulthtml = template.render (‘customTag‘, listdata);
104 document.getElementById(‘tagcontent‘).innerHTML = resulthtml;
105
106 //
107 </script>
108 </body>
109
110 </html>
时间： 2024-10-14 03:54:03