olado.github.com/doT/index.html at 3f5042e3c21a6dece8896cdcf0027e0c8e4b1bde · olado/olado.github.com · GitHub

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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="description" content="doT.js - the fastest and concise javascript template engine for Node.js and browsers"/>
	<style>
	body{background-color:#f4f4f4;color:#555;max-width:800px;padding:20px;font-size:16px;font-weight:200;margin:0 auto;font-family:Helvetica Neue,arial,verdana}h1{color:#708090;text-shadow:0 1px 2px #fff;font-size:4em;text-align:center}.subtitle{text-align:center;margin-bottom:60px}h2{text-shadow:0 1px 2px #fff}h2 span{font-weight:200;font-size:14px}a{color:#2B80FF}.smaller{font-size:.8em}h4{margin:4px 0;font-weight:400;font-size:20px}textarea{border:1px solid lightgrey;outline:none;font-size:14px;width:96%;height:210px;padding:10px;text-align:left}.templategroup,.datagroup,.functiongroup,.resultgroup{width:48%;margin:4px 2% 4px 0;float:left;min-width:300px}.function,.result{background:#DDD;height:212px;padding:10px;font-size:14px;overflow-y:auto}.definegroup{display:none}.templategroup.withdefs .definegroup{display:block}.templategroup.withdefs .template{height:90px}textarea.defines{height:60px}.stripgroup{padding-top:8px;width:160px;float:left}code{font-size:14px;font-weight:bold}#sampletabs{list-style:none;margin:0;padding:0}#sampletabs li{float:left;margin:4px;padding:4px 8px;background:#DDD;cursor:pointer}#sampletabs li.active{background:#2B80FF;color:#FFF}@media all and (max-width:740px){.templategroup,.datagroup,.functiongroup,.resultgroup{width:100%;margin-right:0}pre{overflow-x:scroll}}
	</style>
	<title>doT.js - the fastest and concise javascript template engine for Node.js and browsers</title>
</head>
<body>
<a href="http://github.com/olado"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>

<img src="[email protected]" alt="doT.js" style="width: 200px;height: 200px;margin: 0 auto;display: block;"/>
<!--<h1>doT.js</h1>-->
<h2 class="subtitle">The fastest + concise javascript template engine<br/>for Node.js and browsers.</h2>

<h2>Origins</h2>
<p>
doT.js was created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and Node.js.
It shows great performance for both Node.js and browsers.
<br/>
<p>
During my quest I found 2 template engines that caught my attention and inspired doT.
<br/>The first one was jQote2, a jQuery plugin, it was the first engine to break the speeds by using string concatenation and avoiding 'with' statements.
<br/>The second one was underscore.js which had a nicely designed extension friendly templating function.
<p>
doT.js is fast, small and has no dependencies.
</p>
</p>
</p>

<h2>Source</h2>
<a href="https://github.com/olado/doT">github.com/olado/doT</a>
<p>by Laura Doktorova, MIT license</p>

<h2>Features</h2>
<ul>
<li>no dependencies, 120 loc
</li><li>extremely fast
</li><li>custom delimiters
</li><li>runtime evaluation
</li><li>runtime interpolation
</li><li>compile-time evaluation
</li><li>partials support
</li><li>conditionals support
</li><li>array iterators
</li><li>encoding
</li><li>control whitespace - strip or preserve
</li><li>streaming friendly
</li><li>use it as logic-less or with logic, it is up to you
</li>
</ul>

<h2>Usage <span>play with it, edit and see results as you type</span></h2>
<div id="samples">
	<ul id="sampletabs"></ul>
	<div class="stripgroup">
		<input id="strip" type="checkbox" checked="checked"/>
		<label for="strip">Strip whitespaces</label>
	</div>
	<div style="clear:both;height:10px"></div>
	<div class="templategroup">
		<h4>Template</h4>
		<textarea autocomplete="off" class="template"></textarea>
		<div class="definegroup">
			<h4>Compile-time defines (def)</h4>
			<textarea autocomplete="off" class="defines"></textarea>
		</div>
	</div>
	<div class="functiongroup">
		<h4>doT.template compiles it into</h4>
		<div class="function">
		</div>
	</div>
	<div style="clear:both"></div>
	<div class="datagroup">
		<h4>Data</h4>
		<textarea autocomplete="off" class="data"></textarea>
	</div>
	<div class="resultgroup">
		<h4>Result</h4>
		<div class="result">
	</div>
	</div>
</div>
<div style="clear:both"></div>
<h3>Compile time evaluation vs Runtime evaluation</h3>
You can improve performance further if you use compile time evaluation. It is useful in cases when the data that you want to use are not changing with each run of the template. Think of it as defines or constant variables.
<p>It is also used to statically compile partials. This comes in handy when you want to include similar header and footer on multiple pages. doT also allows to customize partial right from the template that will include it.</p> Check <a href="https://github.com/olado/doT/blob/master/examples/advancedsnippet.txt">advanced sample</a> and <a href="https://github.com/olado/doT/blob/master/examples/browsersample.html">one more sample</a> for hints on how to use defines and partials.

<h2>Benchmarks</h2>
<p>
Here is the <a href="http://jsperf.com/dom-vs-innerhtml-based-templating/53">first benchmark</a> of doT in jsperf.<br/>
Here is a more <a href="http://jsperf.com/dom-vs-innerhtml-based-templating/413">recent benchmark</a> against the new and upgraded engines that popped up lately.
<br/>
People are constantly adding new javascript template engine benchmarks.
</p>
Additional benchmarks are available in <a href="https://github.com/olado/doT/tree/master/benchmarks">github</a>
<div class="smaller">
<p>
To run the benchmarks for measuring execution of compiled templates:
<br/>
In the browser: navigate to benchmarks/index.html or go <a href="http://olado.github.com/doT/bench.html">here</a>
<br/>
With node: node benchmarks/templatesBench.js
</p>
<p>
To run the benchmarks for measuring compilation speed:
<br/>In the browser: navigate to benchmarks/genspeed.html
<br/>
With node: node benchmarks/compileBench.js
</div>

<h2>Installation</h2>
<h3>For Node.js</h3>
<p>If you plan to use doT with Node.js, you can install doT with npm:
<p><code>&gt; npm install dot</code></p>
Then use <code>require('dot')</code> in your code.
</p>
<h3>For browsers</h3>
Include the javascript file in your source:
<p><code>&lt;script type="text/javascript" src="doT.js"&gt;&lt;/script&gt;</code></p>

<h2>Sample</h2>
<div>// 1. Compile template function</div>
<code>var tempFn = doT.template("&lt;h1&gt;Here is a sample template {{=it.foo}}&lt;/h1&gt;");</code>
<div style="margin-top:10px">// 2. Use template function as many times as you like</div>
<code>var resultText = tempFn({foo: 'with doT'});</code>

<h2>API</h2>
<h3>doT.templateSettings - default compilation settings</h3>
You can customize doT by changing compilation settings. Here are the default settings:
<code><pre>doT.templateSettings = {
  evaluate:    /\{\{([\s\S]+?)\}\}/g,
  interpolate: /\{\{=([\s\S]+?)\}\}/g,
  encode:      /\{\{!([\s\S]+?)\}\}/g,
  use:         /\{\{#([\s\S]+?)\}\}/g,
  define:      /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
  conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
  iterate:     /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
  varname: 'it',
  strip: true,
  append: true,
  selfcontained: false
};
</pre></code>
If you want to use your own delimiters, you can modify RegEx in doT.templateSettings to your liking.
<p>Here is the list of default delimiters:</p>
<code>
<table>
<col width="66"/>
<tbody>
<tr><td>{{  }}</td><td>for evaluation</td></tr>
<tr><td>{{= }}</td><td>for interpolation</td></tr>
<tr><td>{{! }}</td><td>for interpolation with encoding</td></tr>
<tr><td>{{# }}</td><td>for compile-time evaluation/includes and partials</td></tr>
<tr><td>{{## #}}</td><td>for compile-time defines</td></tr>
<tr><td>{{? }}</td><td>for conditionals</td></tr>
<tr><td>{{~ }}</td><td>for array iteration</td></tr>
</tbody>
</table>
</code>
<p>
By default, the data in the template must be referenced with 'it'. To change the default  variable name, modify setting 'varname'. For example, if you set 'varname' to "foo, bar" you will be able to pass 2 data instances and refer to them from the template by foo and bar.</p>
<p>
To control whitespace use 'strip' option, true - to strip, false - to preserve.
</p>
<p>
'append' is a performance optimization setting. It allows to tweak performance, depending on the javascript engine used and size of the template, it may produce better results with append set to false.
</p>
<p>
If 'selfcontained' is true, doT will produce functions that have no dependencies on doT. In general, generated functions have no dependencies on doT, with the exception for encodeHTML and it is only added if encoding is used. If 'selfcontained' is true and template needs encoding, encodeHTML function will be included in the generated template function.
</p>

<h3>doT.template - template compilation function</h3>
<p>Call this function to compile your template into a function.</p>
<code> function(tmpl, c, def) </code>
<ul>
<li>tmpl - template text
</li><li>
c - custom compilation settings, if null, doT.templateSettings is used
</li><li>
def - data for compile time evaluation, see <a href="https://github.com/olado/doT/blob/master/examples/advancedsnippet.txt">advanced sample</a>.</p>
</li></ul>
By default, the produced function expects one parameter - data - with the name 'it'. The names and number of parameters can be changed by changing doT.templateSettings.varname </p>

<h3>Node module supports auto-compilation of dot templates</h3>

<p>You can precompile all your templates into modules compatible with commonJS, browsers and AMD.</p>

<pre><code>var dots = require("dot").process({ path: "./views"});
</code></pre>

<p>This will compile <b>.def</b>, <b>.dot</b>, <b>.jst</b> files found under the specified path.
Details</p>

<ul class="task-list">
<li>Template files can have multiple extensions at the same time.</li>
<li>Files with <b>.def</b> extension can be included in other files via {{#def.name}}</li>
<li>Files with <b>.dot</b> extension are compiled into functions with the same name and
can be accessed as render.&lt;filename&gt;</li>
<li>Files with <b>.jst</b> extension are compiled into .js files. Produced .js file can be
loaded as a commonJS, AMD module, or just installed into a global variable (default is set to window.render)</li>
<li>All inline defines defined in the <b>.jst</b> file are
compiled into separate functions and are available via render.&lt;filename&gt;.&lt;definename&gt;</li>
<li>It ignores sub-directories.</li>
</ul>

<p>Basic usage:</p>

<pre><code>	var dots = require("dot").process({path: "./views"});
	// using .jst files
	var render = require('./views/mytemplate');
	render({foo:"hello world"});
	// using .dot files
	dots.mydottemplate({it: "dot"});
</code></pre>

<p>The above snippet will:</p>

<ul class="task-list">
<li>Compile all templates in views folder (.dot, .def, .jst)</li>
<li>Place .js files compiled from .jst templates into the same folder. These files can be used with require, i.e. require("./views/mytemplate")</li>
<li>Return an object with functions compiled from .dot templates as its properties</li>
<li>Render mytemplate template</li>
<li>Note: compiled files can also be used in the browser</li>
</ul>
See <a href="https://github.com/olado/doT/tree/master/examples/express">code example</a>, note there is an index.js file in <a href="https://github.com/olado/doT/tree/master/examples/express/lib/render">output directory</a>. It allows you to do things like:
<pre>
<code>	var render = require('./views');
	render.templateOne(data);
	render.templateTwo(data);
</code>
</pre>

<h3>There is a CLI tool that does the same compilation</h3>
<pre><code>./bin/dot-packer -s examples/views -d out/views
</code></pre>


<h3>Example for express</h3>
Many people are using doT with express.
<br/>I added an example of the best way to do it: <a href="https://github.com/olado/doT/tree/master/examples/express">doT with express</a>

<h2>Issues</h2>
<a href="https://github.com/olado/doT/issues">github.com/olado/doT/issues</a>

<h2>History</h2>
First released on January 10, 2011
<br/>Latest version: 1.0.3 December 2, 2014

<h2>Author</h2>
<a href="http://milq.com/p/olado">@olado</a>

<div style="margin-top:20px">doT.js by Laura Doktorova, MIT license</div>

</body>
<script src="doT.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://bestiejs.github.com/json3/lib/json3.min.js"></script>
<![endif]-->

<script type="text/javascript">
(function() {var encodeHTML = window._encodeHTML || doT.encodeHTMLSource(),samples = {'interpolation': { template:"<div>Hi {{=it.name}}!</div>\n<div>{{=it.age || ''}}</div>", data: { name:"Jake", age:31} },'evaluation': { template:"{{ for(var prop in it) { }}\n<div>{{=prop}}</div>\n{{ } }}", data: {name:"Jake", age:31, mother:"Kate", father:"John", interests:['basketball','hockey','photography'], contact:{email:"[email protected]", phone:"999999999"} } },'partials': { template:"{{##def.snippet:\n<div>{{=it.name}}</div>{{#def.joke}}\n#}}\n\n{{#def.snippet}}", data: { name:"Jake", age:31}, def: {joke:"<div>{{=it.name}} who?</div>"} },'conditionals': { template:"{{? it.name }}\n<div>Oh, I love your name, {{=it.name}}!</div>\n{{?? it.age === 0}}\n<div>Guess nobody named you yet!</div>\n{{??}}\nYou are {{=it.age}} and still don't have a name?\n{{?}}", data: { name:"Jake", age:31} },'arrays': { template:"{{~it.array :value:index}}\n<div>{{=value}}!</div>\n{{~}}", data:{array: ["banana","apple","orange"]} },'encode': { template:"Visit {{!it.uri}}", data:{uri:"https://github.com/olado/doT"} }};var br = $('#samples .result'), bf = $('#samples .function'), bdef = $('#samples .defines'), tg = $('.templategroup'),bt = $('#samples .template'), bd = $('#samples .data'), bs = $('#sampletabs'), data = {}, def, fn;function onTemplate(tmpl) {var text, error;try {var tmpdef = $.extend({}, def);fn = text = doT.template(tmpl, undefined, tmpdef);} catch(e) {fn = undefined;error = text = "Template has an error: " + e;}bf.html(encodeHTML(text));br.html(error ? "Fix the template" : encodeHTML(fn(data)).replace(/\n/g,"<br/>"));}function newSample(s) {$('ul .active').removeClass("active");$("#x"+s).addClass("active");var sample = samples[s];data = $.extend({},sample.data);def = sample.def ? $.extend({},sample.def) : undefined;if (def) {bdef.val(JSON.stringify(def));tg.addClass("withdefs");} else {tg.removeClass("withdefs");bdef.val("");}bt.val(sample.template);bd.val(JSON.stringify(sample.data));onTemplate(sample.template);}bt.keyup(function() { onTemplate(this.value);});bdef.keyup(function() {var error;try {eval("def=("+ this.value +")");} catch(e) {def = undefined;error = "Defs error: " + e;}onTemplate(bt.val());});bd.keyup(function() {var error;try {eval("data=("+ this.value +")");} catch(e) {data = {};error = "Data error: " + e;}br.html(error ? "Fix the template" : encodeHTML(fn(data)).replace(/\n/g,"<br/>"));});$('#strip').change(function() {doT.templateSettings.strip=this.checked;onTemplate(bt.val());});bs.click(function(event) {newSample(event.target.id.substring(1));});var tmp='';for(var s in samples) {if (samples.hasOwnProperty(s)) {tmp+="<li id='x"+s+"'>"+s+"</li>";}}bs.html(tmp);newSample('interpolation');}());
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-31289343-1']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
</script>
</html>