The fastest + concise javascript template engine
for Node.js and browsers.

Origins

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.

During my quest I found 2 template engines that caught my attention and inspired doT.
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.
The second one was underscore.js which had a nicely designed extension friendly templating function.

doT.js is fast, small and has no dependencies.

Source

by Laura Doktorova, MIT license

Features

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

Usage play with it, edit and see results as you type

Compile time evaluation vs Runtime evaluation

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.

Benchmarks

Here is the first benchmark of doT in jsperf.
Here is a more recent benchmark against the new and upgraded engines that popped up lately.
People are constantly adding new javascript template engine benchmarks.

Installation

For Node.js

If you plan to use doT with Node.js, you can install doT with npm:

> npm install dot

For browsers

<script type="text/javascript" src="doT.js"></script>

Sample

API

doT.templateSettings - default compilation settings

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

Here is the list of default delimiters:

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.

To control whitespace use 'strip' option, true - to strip, false - to preserve.

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

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.

doT.template - template compilation function

Call this function to compile your template into a function.

• tmpl - template text
• c - custom compilation settings, if null, doT.templateSettings is used
• def - data for compile time evaluation, see advanced sample.

Node module supports auto-compilation of dot templates

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

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

This will compile .def, .dot, .jst files found under the specified path. Details

• Template files can have multiple extensions at the same time.
• Files with .def extension can be included in other files via {{#def.name}}
• Files with .dot extension are compiled into functions with the same name and can be accessed as render.<filename>
• Files with .jst 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)
• All inline defines defined in the .jst file are compiled into separate functions and are available via render.<filename>.<definename>
• It ignores sub-directories.

Basic usage:

	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"});

The above snippet will:

• Compile all templates in views folder (.dot, .def, .jst)
• Place .js files compiled from .jst templates into the same folder. These files can be used with require, i.e. require("./views/mytemplate")
• Return an object with functions compiled from .dot templates as its properties
• Render mytemplate template
• Note: compiled files can also be used in the browser

	var render = require('./views');
	render.templateOne(data);
	render.templateTwo(data);

There is a CLI tool that does the same compilation

./bin/dot-packer -s examples/views -d out/views

Example for express

Issues

History

Author