express-dot-engine
Node.js engine using the ultra fast doT templating with support for layouts, partials. It's friendly for front-end web libraries (Angular, Ember, Backbone...)
Important
The default settings of doT has been change to use [[ ]]
instead of {{ }}
. This is to support client side templates (Angular, Ember, ...). You can change it back by changing the Settings (see below).
Features
- extremely fast (see jsperf)
- all the advantage of doT
- layout and partial support
- uses
[[ ]]
by default, not clashing with{{ }}
(Angular, Ember...) - custom helpers to your views
- conditional, array iterators, custom delimiters...
- use it as logic-less or with logic, it is up to you
- use it also for your email (or anything) templates
- automatic caching in production
Great for
- √ Purists that wants html as their templates but with full access to javascript
- √ Minimum server-side logic, passing server models to client-side frameworks like Angular, Ember, Backbone...
- √ Clean and fast templating with support for layouts and partials
- √ Email templating
Not so much for
- Jade style lovers (http://jade-lang.com/)
- Full blown templating with everything already coded for you (you can however provide any custom functions to your views)
Installation
Install with npm
$ npm install express-dot-engine --save
Then set the engine in express
var engine = ;... app;app;app;
To use a different extension for your templates, for example to get better syntax highlighting in your IDE, replace 'dot'
with your extension of choice. See express' documentation
app;app;app;
Settings
By default, the engine uses [[ ]]
instead of {{ }}
on the backend. This allows the use of front-end templating libraries that already use {{ }}
.
[[ ]] for evaluation
[[= ]] for interpolation
[[! ]] for interpolation with encoding
[[# ]] for compile-time evaluation/includes and partials
[[## #]] for compile-time defines
[[? ]] for conditionals
[[~ ]] for array iteration
If you want to configure this you can change the exposed doT settings.
// doT settingsenginesettingsdot = evaluate: /\[\[\]\]/g interpolate: /\[\[=\]\]/g encode: /\[\[!\]\]/g use: /\[\[#\]\]/g define: /\[\[##\s*\s*#\]\]/g conditional: /\[\[\??\s*\s*\]\]/g iterate: /\[\[~\s*/g varname: 'layout, partial, locals, model' strip: false append: true selfcontained: false;
Layout
You can specify the layout using yaml and refer to the section as you would from a model.
You can also define any extra configurations (like a page title) that are inherited to the master.
Multiple section support
master.dot
[[= layout.title ]] Hello from master.dot [[= layout.section1 ]] [[= layout.section2 ]]
index.dot
---layout: master.dottitle: Index page--- [[##section1: Hello from index.dot#]] [[##section2: Hello from index.dot again#]]
Result
Index page Hello from master.dot Hello from index.dot Hello from index.dot again
Cascading layout support
CEO.dot
[[= layout.title ]] Hello from CEO.dot [[= layout.section ]]
Boss.dot
---layout: ceo.dot--- [[##section: Hello from Boss.dot [[= layout.section ]]#]]
me.dot
---layout: boss.dottitle: Page title--- [[##section: Hello from me.dot#]]
Result
Boss page Hello from CEO.dot Hello from Boss.dot Hello from me.dot
Partials
Partials are supported. The path is relative to the path of the current file.
index.dot
Message from partial: [[= partial('partials/hello.dot') ]]
partials/hello.dot
Hello from partial
Result
My partial says: Hello from partial
Server model
In your node application, the model passed to the engine will be available through [[= model. ]]
in your template. Layouts and Partials also has access to the server models.
server.js
app;
view.dot
Server says: [[= model.fromServer ]]
Result
Server says: Hello from server
Pro tip
If you want to make the whole model available in the client (to use in angular for example), you can render the model as JSON in a variable on the view.
Helper
You can provide custom helper properties or methods to your views.
server
var engine = ; enginehelpermyHelperProperty = 'Hello from server property helper'; enginehelper { // you have access to the server model var message = thismodelfromServer; // .. any logic you want return 'Server model: ' + message;} ... app;
view
Helper example model: [[= model.fromServer ]] helper property: [[# def.myHelperProperty ]] helper method: [[# def.myHelperMethod('Hello as a parameter') ]] helper in view: [[# def.helperInView ]] [[##def.helperInView: Hello from view helper ([[= model.fromServer ]])#]]
Templating for email (or anything)
render(filename, model, [callback])
renderString(templateStr, model, [callback])
The callback is optional. The callback is in node style function(err, result) {}
Example
var engine = ;var model = message: 'Hello' ; // render from a filevar rendered = engine;email; // async render from template stringengine; ...
Custom template provider
You can provide a custom template provider
server
{ var isAsync = callback && typeof callback === 'function' template = '<div>custom template, you can store templates in the database</div>'; if!isAsync return template; ;}; app;
Caching
Caching is enabled when express is running in production via the 'view cache' variable in express. This is done automatically. If you want to enable cache in development, you can add this
app;
How to run the examples
1. Install express-dot-engine
$ npm install express-dot-engine
2. Install express
$ npm install express
3. Run the example
$ node examples
Open your browser to http://localhost:2015
Roadmap
- Html minification in prod
- Automatically remove server-side comments