doT.js Tutorial: Part 1 of 2

What’s dot.js?

It’s one of the fastest and concise javascript template engine for nodejs and web browsers, created by Laura Doktorova, the President & Co-Founder of Bebedo Inc.
Check out dot.js on Github.com.
dot.js works on both the client and server side. But for this tutorial, we’re only going to be focusing on the client-side.

Why use a template engine?

There are many reasons to use a template engine rather than printing your code in a given language. I think overall, the main reasons for this are code consistency and organization. If you have a good separation of your markup from your logic it becomes easier to debug your code, to share your code with collaborators, and allows for more rapid development by streamlining common methods for outputting your markup.

By: Bryce Hamrick

How to import doT.js

Just include “doT.js” using the script tag. Once included, “doT” will be added to the global namespace.

<script src="https://raw.github.com/olado/doT/master/doT.js"></script>

Steps for using doT.js

1. Create an object literal to store your data. A JSON format is preferred.
   

   var data = { name: "David" };

   var data = { name: "David" };

2. Create a template that creates the overall structure and tells where your data will be placed.
   

   var template = "Hey <b>{{=it.name}}</b>, you own me money.";

   var template = "Hey <b>{{=it.name}}</b>, you own me money.";

3. Generate a template function from the template using doT.template().
   

   var templateFunction = doT.template( template );

   var templateFunction = doT.template( template );

4. Generate HTML by providing data to the template function.
   

   var html = templateFunction( data );

   var html = templateFunction( data );

Full source:

var data = { name: "David" };                                 // step 1
var template = "Hey <b>{{=it.name}}</b>, you own me money.";  // step 2
var templateFunction = doT.template( template );              // step 3
var html = templateFunction( data );                          // step 4
 
// result
html == "Hey &lt;b>David&lt;/b>, you own me money.";

Let’s now examine the function doT.template().

doT.template(template, settings, userDefinedDef);

Forming a template

The content of a template will remain the same, except for the sections that contain javascript encapulated sections (JES). JES look like this. "{{ }}".
Note that the data passed to the template function can be reference by the template using the namespace ‘it’.

Example:

// input
var data = { thatThingOverThere: "Bartman" };
var template = "Hey, look over there! It's {{=it.thatThingOverThere}}!";
var tempFunc = doT.template(template);
var html = tempFunc(data);
 
// output
html == "Hey, look over there! It's Bartman!";

To better understand what’s going on, let’s look at the generated source for the tempFunc.

// source for tempFunc
function anonymous(it) {
	var out = 'Hey, look over there! It\'s '+(it.thatThingOverThere)+'!';
	return out;
}

Type of JES

There two basic type of JES.
Type 1 requires a returned value.

var template = "{{=it.value}}";

Type 2 allows for javascript statements to be executed.

var template = "{{ var global = {}; }}";

Example:

var data = { team: "POWER RANGERS!"}
var template = '{{ var chant = "Go go"; }}{{= chant + " " + it.team}}';
var tempFunc = doT.template( template );
var html = tempFunc( data );
 
// result
html == "Go go POWER RANGERS!";
 
// source for tempFunc
function anonymous(it) {
	var out=''; 
	var chant = "Go go"; 
	out+=( chant + " " + it.team);
	return out;
}

Larry Battle

I love to program, and discover new tech. Check out my <a href="http://stackoverflow.com/users/527776/larry-battle">stackoverflow</a> and <a href="https://github.com/LarryBattle">github</a> accounts.

More Posts - Website

Follow Me: