Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 146 lines (117 sloc) 3.687 kB
c3943c5 @addyosmani updating README with an improved introduction
authored
1 ##Microtemplatez
2
3 This project presents a very compact micro-templating solution created for learning purposes. It's currently under 180 bytes minified, 168 using a few other optimizations (see the end of the readme).
4
5 Unlike some of the more production-ready solutions out there that really need to factor in a rich API, microtemplatez provides developers an easily readable implementation that relies on regular expressions for parsing templates.
6
7 Examples are offered below that demonstrate how this solution can be used to address common templating problems and a tutorial that takes this work further is planned for the future.
31e5743 @addyosmani updating readme,formatting
authored
8
9 ### Sample usage
10
2b3ced0 @addyosmani adding example with nested paths
authored
11 Example: Script-tag based templating
fd21e90 @addyosmani minor additionals to readme
authored
12
31e5743 @addyosmani updating readme,formatting
authored
13 ```javascript
e230d41 @addyosmani updating examples
authored
14 <script type="text/micro" id="myTemplate">
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
15 <img src = "{{avatar}}" title = "{{username}}" alt = "{{username}}" />
7f686a8 @addyosmani expanding examples further
authored
16 <div class='info'>
17 <div class='realname'> {{realName}} </div>
18 <div class='age'> {{age}} </div>
19 <div class='lang'> {{language}} </div>
20 </div>
21
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
22 </script>
23
24 <script>
e230d41 @addyosmani updating examples
authored
25 var markup = document.getElementById("myTemplate").innerHTML,
7f686a8 @addyosmani expanding examples further
authored
26 data = {
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
27 username: "addyosmani",
7f686a8 @addyosmani expanding examples further
authored
28 realName: 'Addy Osmani',
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
29 avatar: "http://a0.twimg.com/profile_images/1256987680/addyosmaniicon_reasonably_small.jpg",
7f686a8 @addyosmani expanding examples further
authored
30 language:'English',
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
31 age: 25
32 };
33
34 // Log the templated output or populate some an element
35 // on the page with it
7f686a8 @addyosmani expanding examples further
authored
36 console.log('Test:' + templatez(markup, data));
2b3ced0 @addyosmani adding example with nested paths
authored
37 </script>
38 ```
39
40 Example: Support for nested paths (ie x.y)
41
42 ```javascript
43 <script id="myTemplate" type="text/micro">
44 <div class='username'> {{username}} </div>
45 <div class="features"> {{features.hair}}, {{features.eyes}}, {{features.height}}</div>
46 </script>
47
48 <script>
49 var markup = $("#myTemplate").html(),
50 data = {
51 username: "addyosmani",
52 features:{
53 hair:'black',
54 eyes: 'brown',
55 height:'5.8'
56 }
57 };
58
59 // Log the templated output or populate some an element
60 // on the page with it
61 console.log('Test:' + templatez(markup, data));
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
62 </script>
31e5743 @addyosmani updating readme,formatting
authored
63 ```
64
65
e230d41 @addyosmani updating examples
authored
66 Example: Basic inline templating
7c25f2c @addyosmani updating readme examples
authored
67
68 ```javascript
e230d41 @addyosmani updating examples
authored
69 var markup = "Test: I am a {{user.age}} year old {{user.sex}} from {{country}}",
7f686a8 @addyosmani expanding examples further
authored
70 data = {
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
71 country: "Ireland",
72 user: {
73 age: 25,
74 name: "Addy",
75 sex: "male"
76 }
77 };
78
7f686a8 @addyosmani expanding examples further
authored
79 console.log(templatez(markup, data));
7c25f2c @addyosmani updating readme examples
authored
80 ```
81
82
8dca743 @addyosmani adding example for templating JSON
authored
83 Example: Templating an array of objects
fd21e90 @addyosmani minor additionals to readme
authored
84
31e5743 @addyosmani updating readme,formatting
authored
85 ```javascript
e230d41 @addyosmani updating examples
authored
86 var markup = "<li><b>{{Name}}</b> ({{ReleaseYear}})</li>",
87 template = "",
88 len = 0;
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
89
90 var movies = [{
91 Name: "The Red Violin",
92 ReleaseYear: "1998"
93 }, {
94 Name: "Eyes Wide Shut",
95 ReleaseYear: "1999"
96 }, {
97 Name: "The Inheritance",
98 ReleaseYear: "1976"
99 }];
100
e230d41 @addyosmani updating examples
authored
101 len = movies.length;
102
103 while(len--) {
104 template += templatez(markup, movies[len]);
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
105 }
e230d41 @addyosmani updating examples
authored
106 console.log('Test:' + template);
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
107 ```
108
8dca743 @addyosmani adding example for templating JSON
authored
109 Example: Templating JSON
110
111 ```javascript
112 <script>
113 var markup = "<li><b>{{Name}}</b> ({{ReleaseYear}}), Rating:{{Rating}}/5</li>",
114 template = "",
115 len = 0;
116
117 var jsonMovies = {
118 "movie1": {
119 "Name": "TheRedViolin",
120 "ReleaseYear": "1998",
121 "Rating": "3"
122
123 },
124 "movie2": {
125 "Name": "EyesWideShut",
126 "ReleaseYear": "1999",
127 "Rating" : "2.5"
128 },
129 "movie3": {
130 "Name": "TheInheritance",
131 "ReleaseYear": "1976",
132 "Rating": "3"
133 }
134 };
135
136 for(var item in jsonMovies){
137 template += templatez(markup, jsonMovies[item]);
138 }
139 console.log('Test:' + template);
140 </script>
141 ```
142
cf87ec1 @addyosmani shaving a few extra bytes off the implementation, removing redundant …
authored
143 #168-byte version
85d04ae @addyosmani updating with 184 byte version, formatting examples further
authored
144 ```javascript
cf87ec1 @addyosmani shaving a few extra bytes off the implementation, removing redundant …
authored
145 function t(a,b){return a.replace(RegExp("{{\\s*([a-z0-9_][\\.a-z0-9_]*)\\s*}}","gi"),function(a,c){var d=c.split("."),e=d.length,f=b,g=0;while(e--)f=f[d[e]];return f})}
31e5743 @addyosmani updating readme,formatting
authored
146 ```
Something went wrong with that request. Please try again.