forked from premasagar/tim
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·137 lines (95 loc) · 3.42 KB
/
index.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
<!doctype html>
<html>
<head><title>Tim</title></head>
<body>
<h1><a href=http://github.com/premasagar/tim>Tim</a></h1>
<p>This document includes <a href=http://github.com/premasagar/tim>tim.js</a>, and contains micro-templates in the HTML for testing.</p>
<h2>Output</h2>
<p><em>View the HTML source</em> to see what's going on.</p>
<pre><code id=console></code></pre>
<!-- MICRO-TEMPLATES -->
<script type=text/tim class=staticText>
Ground Control to Major Tom.
</script>
<script type=text/tim class=helloPerson>
Hi, {{name}}. I'm Tim.
</script>
<script type=text/tim data-tim=myAttrTest>
data-* attributes are {{words.modifier}} {{words.adj}}.
</script>
<script type=text/tim+erb class=myErbTest>
ERB is also <% adj %>, btw.
</script>
<!-- Note: Boolean usage is not tim-lite compatible -->
<script type="text/tim" class="bool">
{{isWeekend}}
{{day}}
{{/isWeekend}}
</script>
<!-- Note: Array iteration is not tim-lite compatible -->
<script type="text/tim" class="loops">
Some nice fruit:
{{fruit}}
{{colour}} {{name}},
{{/fruit}}
</script>
<!-- Note: Object iteration is not tim-lite compatible -->
<script type="text/tim" class="objects">
Object iteration:
{{things}}
{{_key}} are {{_content}},
{{/things}}
</script>
<!-- SCRIPTING -->
<script>
// for debugging
if (console && console.log){
var _ = function(){
console.log.apply(console, arguments);
};
}
</script>
<!-- Include tim.js or a variant (it doesn't matter if this is at the top of document or not) -->
<script src=tim.js></script>
<!-- Then, use it -->
<script>
var log = "";
/////
// A simple call to Tim, supplying the template as a string
log += tim("Inline templates are {{desc}}.", {desc:"quick & easy"});
/////
// Referencing a simple text template, without data substitution
log += tim("staticText");
/////
// Referencing a micro-template in the document's HTML
log += tim("helloPerson", {name:"Bob"});
/////
// Change the target script element attribute
tim.dom({attr:"data-tim"});
log += tim("myAttrTest", {words:{modifier:"really", adj:"useful"}});
/////
// Change the template's start/end delimiters and the target script element type
var erb = tim.parser({start:"<%", end:"%>", type:"text/tim+erb"});
log += erb("myErbTest", {adj:"lovely"});
/* NOTE: the above could have been written as:
var erb = tim({start:"<%", end:"%>"});
erb.dom({type:"text/tim+erb"});
*/
/////
// note: this is not tim-lite compatible
tim.templates("foo", "Cached templates are {{word}}"); // set template named "foo"
var foo = tim.templates("foo"); // get template named "foo"
log += tim(foo, {word:"useful"});
/////
// note: this is not tim-lite compatible
log+= tim("bool", {isWeekend:true, day:"Sunday"});
log+= tim("bool", {isWeekend:true, day:"Saturday"});
log+= tim("bool", {isWeekend:false, day:"Thursday"});
// note: this is not tim-lite compatible
log += tim("loops", {fruit:[{ name:"apple", colour:"green" },{ name:"orange", colour:"orange" },{ name:"banana", colour:"yellow" }]});
// note: this is not tim-lite compatible
log += tim("objects", {things:{ roses:"red", violets:"blue", dogs:"green", oranges:"round" }});
document.getElementById("console").innerHTML = log;
</script>
</body>
</html>