Skip to content

Examples are now OK in IEs, minor typo fixes, HTML5 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
olado merged 4 commits into from
Jun 22, 2012
Merged

Examples are now OK in IEs, minor typo fixes, HTML5 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c97e8e2
added gitignore
samdark Jun 19, 2012
20a0b28
updated html to match html5 doctype used, added title, typo fix
samdark Jun 19, 2012
e0e1839
removed duplicate index page, added redirect instead
samdark Jun 19, 2012
9dc33d9
more on html5, fixed non-working examples in IE
samdark Jun 19, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.idea
nbproject
7 changes: 7 additions & 0 deletions doT.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 7 additions & 8 deletions doT/bench.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta charset="utf-8" />

<title>Templating Test Suite</title>

<script type="text/javascript" src="https://github.com/olado/doT/raw/master/benchmarks/jslitmus.js"></script>
<script type="text/javascript" src="https://github.com/olado/doT/raw/master/benchmarks/templating/doU.js"></script>
<script type="text/javascript" src="https://github.com/olado/doT/raw/master/benchmarks/templating/doT.js"></script>
<script type="text/javascript" src="https://github.com/olado/doT/raw/master/benchmarks/templatesBench.js"></script>
<script src="https://github.com/olado/doT/raw/master/benchmarks/jslitmus.js"></script>
<script src="https://github.com/olado/doT/raw/master/benchmarks/templating/doU.js"></script>
<script src="https://github.com/olado/doT/raw/master/benchmarks/templating/doT.js"></script>
<script src="https://github.com/olado/doT/raw/master/benchmarks/templatesBench.js"></script>

</head>

Expand Down
208 changes: 4 additions & 204 deletions doT/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,209 +1,9 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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:#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>
<meta charset="utf-8"/>
<meta http-equiv="Refresh" content="0;url=.." />
</head>
<body>
<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>

<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>

<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: 0.2.0 April 29, 2012

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

<div style="margin-top:20px">doT.js is an open source component of <a href="http://bebedo.com">bebedo.com</a>, MIT license</div>

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

<script type="text/javascript">
(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');}());
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>
</html>
5 changes: 3 additions & 2 deletions doT/tutorial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>doT.js - Tutorial for the fastest + concise javascript template engine</title>
<link rel="stylesheet" type="text/css" href="slides.css" />
Expand Down Expand Up @@ -311,7 +312,7 @@ <h1>Fork doT.js on github</h1>
</div><!--presentation-->
</body>

<script type="text/javascript" src="https://raw.github.com/olado/doT/master/doT.min.js"></script>
<script type="text/javascript" src="../doT.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://bestiejs.github.com/json3/lib/json3.min.js"></script>
Expand Down
Loading