-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgtjstpl.demo.html
165 lines (145 loc) · 8.16 KB
/
gtjstpl.demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<!--SERVER_SIDE_SETTINGS-->
<meta name="keywords" content="GTJSTpl, GTJST, Template, template engine, JavaScript, cross-platform, 模板, 模板引擎, javascript template engine"/>
<meta name="description" content="GTJSTpl is a JavaScript-based, generally-targeted template language and engine. GTJSTpl是一种基于JavaScript的HTML模板语言及模板引擎, javascript template engine."/>
<title>GTJSTpl, Generally-Targeted JavaScript Template Engine</title>
</head>
<body><!-- contents of the body will be parsed and compiled by GTJSTpl -->
<style>span{ padding-top:30px; } a{ text-decoration:none; }</style>
{include file="$pageheader"}
{include file="$model"}
{$i=Math.random()}
{var $jstr='this is a j string'}
<hr/>
<div id="mynewscontentlist">特征优势/Features
{foreach $newscontentlist as $page}
<ul><li><a href="#">{$newscontentlist[$page]['title']}</a></li></ul>
{/foreach}
</div>
<hr/>
<span> Try to call a func named 'aFunc':
{$aFunc($i)}
</span>
<span>Call a built-in func:
{$jstr.substring(0, 12)}
</span>
<span id="randnum5"> <br/> Give random numbers:
{while $i<5}
<li> line {$i} </li>
{$i++}
{/while}
</span>
<span> <br/>Try to list an associative list:
{for (var $k in $userlist)}
<li>Id:{$userlist[$k]['id']}, Name:{$userlist[$k]['name']}</li>
{/for}
</span>
<span> 2nd, try to list an associative list:
{for var $k in $userlist}
<li>Id:{$userlist[$k]['id']}, Name:{$userlist[$k]['name']}</li>
{/for}
</span>
<span> 3rd, try to list an associative list:
{foreach $userlist as $k}
<li onclick="javascript:bFunc('{$k}');">{$k} Id:{$userlist[$k]['id']}, Name:{$userlist[$k]['name']}</li>
{/foreach}
</span>
<span> try to branch-if-else:
{$i=Math.random()}
{if $i < 0.3}
<li>{$i} is lt 0.3</li>
{else if $i<0.5 }
<li>{$i} is lt 0.5</li>
{else}
<li>{$i} is gt 0.5</li>
{/if}
</span>
<script>
if(1==1){
console.log("additional original scripts before jsondata will be invoked twice....."
+ (new Date()));
}
</script>
<hr/>
<!-- <a></a> -->
<!-- -->
<span id="literalarea">
Try literal:<br/>
{literal}
{if $user['feedback'] == 2}
{$user['age']}
{/if}
{/literal}
</span>
<br/>
<div id="embeddedarea">
<span {if $user['feedback'] lt 3 } class="cls2"{else} class="cls3"{/if}> This is A SPAN with embedded Tpl sentence. </span>
<br/>
<a name="firsta"{if $user['feedback'] eq "fb2"} class="cls2"{/if}>This is a name.</a>
<a name="firstb" {if $user['feedback'] eq 2} class="cls3"{/if}> This is a name, 2nd. </a>
<br/>
<span {if $user['feedback'] gt 4} class="cls2"{else} class="cls3"{/if}> This is a span, 2nd. </span>
</div>
<hr/>
{include content="$pagefooter"}
<!-- "copyright_year": 2017, -->
<!-- GTJSTpl json data, content below this line will not be parsed by GTJSTpl -->
<div id="gtjstpljsondata">
{
"pagetitle": "-gtjstpl, GTJSTpl",
"newslist": {
"0": {"title":"基于JavaScript通用HTML页面模板引擎", "href":"#11"},
"1": {"title":"GTJSTpl模板语义, 语法及解析引擎", "href":"#10"},
"2": {"title":"God's return to God, Caesar's return to Caesar; ", "href":"#9"},
"3": {"title":"the backend runs in background, the frontend is executed in foreground.", "href":"#8"},
"4": {"title":"上帝的归上帝, 凯撒的归凯撒; 后端的归后台, 前端的归前台", "href":"#7"}
},
"keywords": "Wadelau, Xenxin, GTJSTpl",
"newslist_nextpage": "https://ufqi.com/#newlist_nextpage_value",
"newscontentlist":{
"0":{"title":"Runtime in client-side, reduce computing render in server-side; 客户端解析，节省服务器端计算资源;", "content":"Runtime in client-side, reduce computing render in server-side;", "pages":3},
"1":{"title":"Language-independent, not-bound with backend scripts/languages; 模板语言独立，不与服务器端资源做任何绑定", "content":"Language-independent, not-bound with backend scripts/languages;", "pages":3},
"2":{"title":"Totally-isolated between MVC, data transfer with JSON; 纯粹的MVC，层间数据用JSON格式传递", "content":"Totally-isolated between MVC, data transfer with JSON;", "pages":2},
"3": {"title":"Full-support template tags with built-in logic and customerized JavaScript functions; 常见模板语言功能全支持，附带复杂而强大的JavaScript编程能力", "content":"Full-support template tags with built-in logic and customerized JavaScript functions;"},
"4": {"title":"No more tags language to be learned, just JavaScript; 无学习成本，直接使用JavaScript书写模板语言....", "content":"No more tags language to be learned, just JavaScript;"}
},
"user": {
"feedback": 2,
"iname": {"surname":"Wadelau", "familyname":"Lau"},
"age": "33"
},
"userlist": {
"usera": {"id":1234, "name":"Alice张"},
"userb": {"id":4567, "name":"Bob李"}
},
"atag": "Xenxin\"s Tag",
"pageheader":"<div id=\"header\"> <div class=\"h_box\"> <div class=\"logo\"><a href=\"#\">GTJSTpl, Generally-Targeted JavaScript Template Engine</a></div> <div class=\"menu\"> <ul> <li><a href=\"gtjstpl.demo.html?ri=\">首页</a></li> <li><a href=\"#\">关于GTJSTpl</a> <div class=\"submenu\"> <ul> <li class=\"title\"><a href=\"#\">GTJSTpl介绍</a></li> <li class=\"title\"><a href=\"#\">GTJSTpl品牌</a></li> </ul> </div> </li> <li><a href=\"#\" class=\"active\">GTJSTpl in 新闻</a></li> </ul> </div> </div> <div class=\"clear\"></div> </div>",
"model":"<div class=\"news\"> <div class=\"title\">GTJSTpl新闻/News</div> <div class=\"content\"> <ul class=\"cont\" tpldata=\"newslist::repeat::\"> {for (var $k in $newslist)} <li><a class=\"btn_show\" href=\"{$newslist[$k]['href']}\">> {$newslist[$k]['title']} <a name=\"atag\" tpldata=\"atag::updatevalue\">{$newslist[$k]['title']}</a> </a> {if $newslist[$k]['title'].length > 25 } <span>Length is too long!</span> {else} <span>Length is okay.</span> {/if} </li> {/for} </ul> </div> <div class=\"pages\"> <ul> <li><a href=\"javascript:;\" tpldata=\"newslist_nextpage::updateattribute::href\" href=\"{$newslist_nextpage}\"> 下一页 </a></li> </ul> </div> </div>",
"pagefooter":"<div id=\"footer\"> <script> if(1==1){console.log(\"2nd 1==1.\"+(new Date()));} else if(2==2) {if(3==3){console.log(\"2nd 3==3\"+(new Date()));};}; function aFunc(myi){if (1==1){console.log(\"this is in aFunc \"+(new Date())+''+myi); return ('now:'+(new Date())+''+myi);}} </script> <div class=\"f_box\"> <div class=\"f_logo\"> </div> <div class=\"f_menu\"> <ul> <li><a href=\"#\">联系GTJSTpl</a></li> © <span tpldata=\"copyright_year::updatevalue::\">{$copyright_year}</span> <a href=\"/\">-UFQI</a>. All rights reversed.</li> </ul> </div> <div class=\"allright_2\" onclick=\"javascript:if(1==1){aFunc();}else{if(1==1){aFunc();}}\">GTJSTpl, Generally-Targeted JavaScript Template Engine</div> </div> </div>"
}
</div>
<!--
@todo include with scripts
---- done, Dec 04, 2018
-->
<script>
if(1==1){
console.log("additional original scripts after jsondata will be invoked only once....."
+ (new Date()));
}
//-
function bFunc(myi){
console.log("this is in bFunc "+(new Date())+''+myi); return ('now:'+(new Date())+''+myi);
}
</script>
<!-- gtjstpl codes -->
<script type="text/javascript" async>
window.GTJSTpl = {'JsonDataId':'gtjstpljsondata', 'IsDebug': true}; // optional
</script>
<script type="text/javascript" src="gtjstpl.js" async></script>
<noscript>JavaScript Required.</noscript>
</body>
</html>