Skip to content
Newer
Older
100644 148 lines (106 sloc) 4.24 KB
ac49810 @georgi initial
authored Sep 9, 2008
1 Patroon - a Javascript Template Engine
2 ======================================
3
4 Patroon is a template engine written in Javascript in about 100 lines
e9c7762 @georgi context attribute was replaced by using a class name for scope declar…
authored Sep 19, 2008
5 of code. It takes existing DOM nodes annotated with class names and
6 expand a data object according to simple rules. Additionally you may
7 use traditional string interpolation inside attribute values and text
8 nodes.
ac49810 @georgi initial
authored Sep 9, 2008
9
45a02e7 @georgi updated README
authored Sep 16, 2008
10 ### The Data
ac49810 @georgi initial
authored Sep 9, 2008
11
45a02e7 @georgi updated README
authored Sep 16, 2008
12 Comments in this blog are stored as a list of JSON objects, I wrote
13 about it [here][1]. So think about a data object like this:
ac49810 @georgi initial
authored Sep 9, 2008
14
15 var data = {
16 comment: [{
e9c7762 @georgi context attribute was replaced by using a class name for scope declar…
authored Sep 19, 2008
17 time: "2008-09-07 12:28:33",
ac49810 @georgi initial
authored Sep 9, 2008
18 name: "David Beckham",
19 website: "beckham.com",
20 text: "I watched the euro finals on tv..."
21 }, {
e9c7762 @georgi context attribute was replaced by using a class name for scope declar…
authored Sep 19, 2008
22 time: "2008-09-07 14:28:33",
ac49810 @georgi initial
authored Sep 9, 2008
23 name: "Tuncay",
24 website: "",
25 text: "Me too"
26 }]
27 };
28
29
45a02e7 @georgi updated README
authored Sep 16, 2008
30 ### The Template
31
ac49810 @georgi initial
authored Sep 9, 2008
32 This data will be expanded with help of following template:
33
34 <div class="comments">
35 <div id="comments-template">
e9c7762 @georgi context attribute was replaced by using a class name for scope declar…
authored Sep 19, 2008
36 <div class="comment">
45a02e7 @georgi updated README
authored Sep 16, 2008
37 <div class="top">
a5b2908 @georgi updated README
authored Sep 16, 2008
38 {website.length > 0 ? linkTo(name, website) : name} said
45a02e7 @georgi updated README
authored Sep 16, 2008
39 <a title="{time}"></a>:
ac49810 @georgi initial
authored Sep 9, 2008
40 </div>
45a02e7 @georgi updated README
authored Sep 16, 2008
41 <div class="text">
a5b2908 @georgi updated README
authored Sep 16, 2008
42 {text}
43 </div>
ac49810 @georgi initial
authored Sep 9, 2008
44 </div>
45 </div>
46 </div>
47
48
45a02e7 @georgi updated README
authored Sep 16, 2008
49 ### Usage
ac49810 @georgi initial
authored Sep 9, 2008
50
45a02e7 @georgi updated README
authored Sep 16, 2008
51 The javascript to actually execute this template looks like this:
ac49810 @georgi initial
authored Sep 9, 2008
52
53 // The comments template will be removed from the DOM!
54 var template = new Template('comments-template');
55
56 // Expand the template into the comments section
57 $('.comments').expand(template, data);
58
59
45a02e7 @georgi updated README
authored Sep 16, 2008
60 If you don't want to use jQuery, please look at the end of this article.
ac49810 @georgi initial
authored Sep 9, 2008
61
62
45a02e7 @georgi updated README
authored Sep 16, 2008
63 ### Output
ac49810 @georgi initial
authored Sep 9, 2008
64
45a02e7 @georgi updated README
authored Sep 16, 2008
65 The given example renders following output:
ac49810 @georgi initial
authored Sep 9, 2008
66
45a02e7 @georgi updated README
authored Sep 16, 2008
67 <div class="comments">
68 <div id="comments-template">
69 <div class="comment">
70 <div class="top">
a5b2908 @georgi updated README
authored Sep 16, 2008
71 <a href="http://backham.com">David Beckham</a> said
72 <a title="2008-09-07 12:28:33">2 hours ago</a>
45a02e7 @georgi updated README
authored Sep 16, 2008
73 </div>
74 <div class="text">
a5b2908 @georgi updated README
authored Sep 16, 2008
75 I watched the euro finals on tv...
76 </div>
45a02e7 @georgi updated README
authored Sep 16, 2008
77 </div>
78 <div class="comment">
79 <div class="top">
a5b2908 @georgi updated README
authored Sep 16, 2008
80 Tuncay said
81 <a title="2008-09-07 14:28:33">1 minute ago</a>
45a02e7 @georgi updated README
authored Sep 16, 2008
82 </div>
83 <div class="text">
a5b2908 @georgi updated README
authored Sep 16, 2008
84 Me too
85 </div>
45a02e7 @georgi updated README
authored Sep 16, 2008
86 </div>
87 </div>
88 </div>
89
90
ac49810 @georgi initial
authored Sep 9, 2008
91
45a02e7 @georgi updated README
authored Sep 16, 2008
92 ### Basic Rules
ac49810 @georgi initial
authored Sep 9, 2008
93
45a02e7 @georgi updated README
authored Sep 16, 2008
94 There are 3 basic rules regarding the evaluation:
ac49810 @georgi initial
authored Sep 9, 2008
95
e9c7762 @georgi context attribute was replaced by using a class name for scope declar…
authored Sep 19, 2008
96 * Each found class name of a node will be looked up in the current
97 data object. If found, the node will be processed in the new scope.
98 Example: the class name `comment` instructs to lookup the name
99 `comment` in the data object, which contains the comment array.
ac49810 @georgi initial
authored Sep 9, 2008
100
45a02e7 @georgi updated README
authored Sep 16, 2008
101 * Arrays repeat the current node and process its elements recursively.
ac49810 @georgi initial
authored Sep 9, 2008
102
e9c7762 @georgi context attribute was replaced by using a class name for scope declar…
authored Sep 19, 2008
103 * Code will be evaluated for text surrounded with braces (works also
104 for attributes). The evaluation takes place in the scope of the
105 current data object, which is in the example a comment object. So
106 the snippet `<a title="{time}">` will lookup the time in the comment
107 object and insert into the title attribute.
ac49810 @georgi initial
authored Sep 9, 2008
108
bc777ed @georgi updated README
authored Sep 16, 2008
109 ### Helper
110
111 Code snippets inside the template will be executed within the scope of
112 a Helper object. If you want to extend it, just add your functions to
113 `Template.Helper`. At the moment it defines only one function:
114
115 Template.Helper = {
116
117 linkTo: function(text, url) {
118 if (url.indexOf('http://') == -1 && url[0] != '/' && url[0] != '#') {
119 url = 'http://' + url;
120 }
121 return '<a href="' + url +'">' + text + '</a>';
122 }
123
124 };
ac49810 @georgi initial
authored Sep 9, 2008
125
126 ### Download
127
128 Download the script at my [github repository][2].
129
130 [1]: commenting-system-with-lightweight-json-store.html
131 [2]: http://github.com/georgi/patroon/tree/master
45a02e7 @georgi updated README
authored Sep 16, 2008
132
133
134 ### Without jQuery
135
136 Without jQuery template expansion is a bit verbose:
137
138 // The comments template will be removed from the DOM!
139 var template = new Template('comments-template');
140
141 // template will result in a new DOM node
142 var result = template.expand(data);
143
144 // insert the resulting node into the comments container
145 var container = document.getElementsByClassName('comments')[0];
146 container.appendChild(result);
147
Something went wrong with that request. Please try again.