Skip to content

Commit 159af45

Browse files
oladoolado
committed
Merge pull request #5 from samdark/minor-fixes-ie-compatibility
Thanks Alex. "Examples are now OK in IEs, minor typo fixes, HTML5"
2 parents 661c874 + 9dc33d9 commit 159af45

File tree

6 files changed

+35
-224
lines changed

6 files changed

+35
-224
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.idea
2+
nbproject

‎doT.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎doT/bench.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
1+
<!DOCTYPE html>
2+
<html lang="en">
43
<head>
5-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
4+
<meta charset="utf-8" />
65

76
<title>Templating Test Suite</title>
87

9-
<script type="text/javascript" src="https://github.com/olado/doT/raw/master/benchmarks/jslitmus.js"></script>
10-
<script type="text/javascript" src="https://github.com/olado/doT/raw/master/benchmarks/templating/doU.js"></script>
11-
<script type="text/javascript" src="https://github.com/olado/doT/raw/master/benchmarks/templating/doT.js"></script>
12-
<script type="text/javascript" src="https://github.com/olado/doT/raw/master/benchmarks/templatesBench.js"></script>
8+
<script src="https://github.com/olado/doT/raw/master/benchmarks/jslitmus.js"></script>
9+
<script src="https://github.com/olado/doT/raw/master/benchmarks/templating/doU.js"></script>
10+
<script src="https://github.com/olado/doT/raw/master/benchmarks/templating/doT.js"></script>
11+
<script src="https://github.com/olado/doT/raw/master/benchmarks/templatesBench.js"></script>
1312

1413
</head>
1514

‎doT/index.html‎

Lines changed: 4 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -1,209 +1,9 @@
11
<!DOCTYPE html>
2-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
2+
<html lang="en">
33
<head>
4-
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
5-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6-
<meta name="description" content="doT.js - the fastest and concise javascript template engine for Node.js and browsers"/>
7-
<style>
8-
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:#a80000}.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:#fa8072;color:#FFF}@media all and (max-width:740px){.templategroup,.datagroup,.functiongroup,.resultgroup{width:100%;margin-right:0}pre{overflow-x:scroll}}</style>
4+
<meta charset="utf-8"/>
5+
<meta http-equiv="Refresh" content="0;url=.." />
96
</head>
107
<body>
11-
<a href="http://github.com/olado"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/5d21241b64dc708fcbb701f68f72f41e9f1fadd6/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Form me on GitHub"></a>
12-
13-
<h1>doT.js</h1>
14-
<h2 class="subtitle">The fastest + concise javascript template engine<br/>for Node.js and browsers.</h2>
15-
16-
<h2>Origins</h2>
17-
<p>
18-
doT.js was created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and Node.js.
19-
It shows great performance for both Node.js and browsers.
20-
<br/>
21-
<p>
22-
During my quest I found 2 template engines that caught my attention and inspired doT.
23-
<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.
24-
<br/>The second one was underscore.js which had a nicely designed extension friendly templating function.
25-
<p>
26-
doT.js is fast, small and has no dependencies.
27-
</p>
28-
</p>
29-
</p>
30-
31-
<h2>Source</h2>
32-
<a href="https://github.com/olado/doT">github.com/olado/doT</a>
33-
<p>by Laura Doktorova, MIT license</p>
34-
35-
<h2>Features</h2>
36-
<ul>
37-
<li>no dependencies, 120 loc
38-
</li><li>extremely fast
39-
</li><li>custom delimiters
40-
</li><li>runtime evaluation
41-
</li><li>runtime interpolation
42-
</li><li>compile-time evaluation
43-
</li><li>partials support
44-
</li><li>conditionals support
45-
</li><li>array iterators
46-
</li><li>encoding
47-
</li><li>control whitespace - strip or preserve
48-
</li><li>streaming friendly
49-
</li><li>use it as logic-less or with logic, it is up to you
50-
</li>
51-
</ul>
52-
53-
<h2>Usage <span>play with it, edit and see results as you type</span></h2>
54-
<div id="samples">
55-
<ul id="sampletabs"></ul>
56-
<div class="stripgroup">
57-
<input id="strip" type="checkbox" checked="checked"/>
58-
<label for="strip">Strip whitespaces</label>
59-
</div>
60-
<div style="clear:both;height:10px"></div>
61-
<div class="templategroup">
62-
<h4>Template</h4>
63-
<textarea autocomplete="off" class="template"></textarea>
64-
<div class="definegroup">
65-
<h4>Compile-time defines (def)</h4>
66-
<textarea autocomplete="off" class="defines"></textarea>
67-
</div>
68-
</div>
69-
<div class="functiongroup">
70-
<h4>doT.template compiles it into</h4>
71-
<div class="function">
72-
</div>
73-
</div>
74-
<div style="clear:both"></div>
75-
<div class="datagroup">
76-
<h4>Data</h4>
77-
<textarea autocomplete="off" class="data"></textarea>
78-
</div>
79-
<div class="resultgroup">
80-
<h4>Result</h4>
81-
<div class="result">
82-
</div>
83-
</div>
84-
</div>
85-
<div style="clear:both"></div>
86-
<h3>Compile time evaluation vs Runtime evaluation</h3>
87-
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.
88-
<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.
89-
90-
<h2>Benchmarks</h2>
91-
<p>
92-
Here is the <a href="http://jsperf.com/dom-vs-innerhtml-based-templating/53">first benchmark</a> of doT in jsperf.<br/>
93-
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.
94-
<br/>
95-
People are constantly adding new javascript template engine benchmarks.
96-
</p>
97-
Additional benchmarks are available in <a href="https://github.com/olado/doT/tree/master/benchmarks">github</a>
98-
<div class="smaller">
99-
<p>
100-
To run the benchmarks for measuring execution of compiled templates:
101-
<br/>
102-
In the browser: navigate to benchmarks/index.html or go <a href="http://olado.github.com/doT/bench.html">here</a>
103-
<br/>
104-
With node: node benchmarks/templatesBench.js
105-
</p>
106-
<p>
107-
To run the benchmarks for measuring compilation speed:
108-
<br/>In the browser: navigate to benchmarks/genspeed.html
109-
<br/>
110-
With node: node benchmarks/compileBench.js
111-
</div>
112-
113-
<h2>Installation</h2>
114-
<h3>For Node.js</h3>
115-
<p>If you plan to use doT with Node.js, you can install doT with npm:
116-
<p><code>&gt; npm install dot</code></p>
117-
Then use <code>require('dot')</code> in your code.
118-
</p>
119-
<h3>For browsers</h3>
120-
Include the javascript file in your source:
121-
<p><code>&lt;script type="text/javascript" src="doT.js"&gt;&lt;/script&gt;</code></p>
122-
123-
<h2>Sample</h2>
124-
<div>// 1. Compile template function</div>
125-
<code>var tempFn = doT.template("&lt;h1&gt;Here is a sample template {{=it.foo}}&lt;/h1&gt;");</code>
126-
<div style="margin-top:10px">// 2. Use template function as many times as you like</div>
127-
<code>var resultText = tempFn({foo: 'with doT'});</code>
128-
129-
<h2>API</h2>
130-
<h3>doT.templateSettings - default compilation settings</h3>
131-
You can customize doT by changing compilation settings. Here are the default settings:
132-
<code><pre>doT.templateSettings = {
133-
evaluate: /\{\{([\s\S]+?)\}\}/g,
134-
interpolate: /\{\{=([\s\S]+?)\}\}/g,
135-
encode: /\{\{!([\s\S]+?)\}\}/g,
136-
use: /\{\{#([\s\S]+?)\}\}/g,
137-
define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
138-
conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
139-
iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
140-
varname: 'it',
141-
strip: true,
142-
append: true,
143-
selfcontained: false
144-
};
145-
</pre></code>
146-
If you want to use your own delimiters, you can modify RegEx in doT.templateSettings to your liking.
147-
<p>Here is the list of default delimiters:</p>
148-
<code>
149-
<table>
150-
<col width="66"/>
151-
<tbody>
152-
<tr><td>{{ }}</td><td>for evaluation</td></tr>
153-
<tr><td>{{= }}</td><td>for interpolation</td></tr>
154-
<tr><td>{{! }}</td><td>for interpolation with encoding</td></tr>
155-
<tr><td>{{# }}</td><td>for compile-time evaluation/includes and partials</td></tr>
156-
<tr><td>{{## #}}</td><td>for compile-time defines</td></tr>
157-
<tr><td>{{? }}</td><td>for conditionals</td></tr>
158-
<tr><td>{{~ }}</td><td>for array iteration</td></tr>
159-
</tbody>
160-
</table>
161-
</code>
162-
<p>
163-
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>
164-
<p>
165-
To control whitespace use 'strip' option, true - to strip, false - to preserve.
166-
</p>
167-
<p>
168-
'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.
169-
</p>
170-
<p>
171-
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.
172-
</p>
173-
174-
<h3>doT.template - template compilation function</h3>
175-
<p>Call this function to compile your template into a function.</p>
176-
<code> function(tmpl, c, def) </code>
177-
<ul>
178-
<li>tmpl - template text
179-
</li><li>
180-
c - custom compilation settings, if null, doT.templateSettings is used
181-
</li><li>
182-
def - data for compile time evaluation, see <a href="https://github.com/olado/doT/blob/master/examples/advancedsnippet.txt">advanced sample</a>.</p>
183-
</li></ul>
184-
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>
185-
186-
<h2>Issues</h2>
187-
<a href="https://github.com/olado/doT/issues">github.com/olado/doT/issues</a>
188-
189-
<h2>History</h2>
190-
First released on January 10, 2011
191-
<br/>Latest version: 0.2.0 April 29, 2012
192-
193-
<h2>Author</h2>
194-
<a href="http://twitter.com/olado">@olado</a>
195-
196-
<div style="margin-top:20px">doT.js is an open source component of <a href="http://bebedo.com">bebedo.com</a>, MIT license</div>
197-
1988
</body>
199-
<script type="text/javascript" src="https://raw.github.com/olado/doT/master/doT.min.js"></script>
200-
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
201-
<!--[if lt IE 9]>
202-
<script type="text/javascript" src="http://bestiejs.github.com/json3/lib/json3.min.js"></script>
203-
<![endif]-->
204-
205-
<script type="text/javascript">
206-
(function() {var 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:"jake@xyz.com", 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:"http://bebedo.com/?keywords=Yoga"} }};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.toString()));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');}());
207-
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);})();
208-
</script>
209-
</html>
9+
</html>

‎doT/tutorial.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
1+
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8"/>
45
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
56
<title>doT.js - Tutorial for the fastest + concise javascript template engine</title>
67
<link rel="stylesheet" type="text/css" href="slides.css" />
@@ -311,7 +312,7 @@ <h1>Fork doT.js on github</h1>
311312
</div><!--presentation-->
312313
</body>
313314

314-
<script type="text/javascript" src="https://raw.github.com/olado/doT/master/doT.min.js"></script>
315+
<script type="text/javascript" src="../doT.min.js"></script>
315316
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
316317
<!--[if lt IE 9]>
317318
<script type="text/javascript" src="http://bestiejs.github.com/json3/lib/json3.min.js"></script>

0 commit comments

Comments
 (0)