-
Notifications
You must be signed in to change notification settings - Fork 0
/
ex3.html
67 lines (59 loc) · 1.89 KB
/
ex3.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
<html>
<head>
<title>htmltmpl loop_context_vars option example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="htmltmpl/core.js"></script>
<script type="text/javascript">
var tmpl; // make tmpl a global var for debug purposes
function run(small)
{
var el;
var data = {};
if ( small )
data.fields = [ { val: "a" }, { val: "b" } ];
else
data.fields = [ { val: "a" }, { val: "b" }, { val: "c" }, { val: "d" } ];
tmpl = new htmltmpl(document.getElementById("tmpl"),
{ loop_context_vars: 1,
ret_dom: 1 });
el = tmpl.apply(data);
document.getElementById("cntr").appendChild(el);
}
</script>
</head>
<body>
<div>
Example of using loop_context_vars option.
</div>
<div id="tmpl" style="display: none"><div style="border: 1px solid green; margin-bottom: 10px">
{%TMPL_LOOP NAME=fields%}
<div style="margin-bottom: 20px">
<div>val: {%TMPL_VAR NAME=val%}</div>
Loop counter/index is {%TMPL_VAR NAME=__counter__%}/{%TMPL_VAR NAME=__index__%}
{%TMPL_IF NAME=__first__%}
<div>This is the first pass of the loop</div>
{%/TMPL_IF%}
{%TMPL_IF NAME=__inner__%}
<div>This is the inner pass of the loop</div>
{%/TMPL_IF%}
{%TMPL_IF NAME=__outer__%}
<div>This is the outer pass of the loop</div>
{%/TMPL_IF%}
{%TMPL_IF NAME=__odd__%}
<div>This is the odd pass of the loop</div>
{%/TMPL_IF%}
{%TMPL_IF NAME=__even__%}
<div>This is the even pass of the loop</div>
{%/TMPL_IF%}
{%TMPL_IF NAME=__last__%}
<div>This is the last pass of the loop</div>
{%/TMPL_IF%}
</div>
{%/TMPL_LOOP%}
</div></div>
<input type="button" onclick="run(0)" value="run big loop"/>
<input type="button" onclick="run(1)" value="run small loop"/>
<div id="cntr">
</div>
</body>
</html>