doT.js Tutorial part 1

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

  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.";

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

    var templateFunction = doT.template( template );

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

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

End of part 1. Part 2 coming soon.

Larry Battle

I love to program, and discover new tech. Check out my stackoverflow and github accounts.

More Posts - Website

Follow Me:
Twitter

  • Rajeevkumar0011

    Unknown Unknown

    This is a very good example of doT template engine.

  • Olivier

    Unknown Unknown

    Nice article, Larry. Thank you. Btw, can I use doT.js with jQuery?

  • Olivier

    Unknown Unknown

    P.S. The link to Laura DoktorLova is broken!

  • Olivier

    Unknown Unknown

    Have you seen these results: http://jsperf.com/dom-vs-innerhtml-based-templating/562#comments

    doT.js is way up there!

    • larrybattle

      Unknown Unknown

      Thanks for your feedback. I fixed the broken link. And yes, you can use jQuery with doT.js.
      I’ll try to include an example of using jQuery with doT.js in the next tutorial.

  • Kaliyugantagonist

    Unknown Unknown

    Hi Larry,
    First of all, I’m thankful to you for the simple and easy tutorial for someone who hardly knows anything about a ‘template engine’ – server or client side !
    Eagerly looking forward for some more doT.js and as Olivier mentioned, its usage with JQuery !
    Regards !

  • Andrew

    Unknown Unknown

    hi there,
    thanks for your tutorial, I’ve got a question: it would be possible, using jQuery, to load the template from an external file?

  • Dilip Prajapati
  • kiranbob

    Unknown Unknown

    Larry this article is very good and helpful for those who are new to doT.js, Thank you very much.

    Could please post a real time example to load actual form template from external file and bind the data by doT engine?

  • Ani Agajanian

    Unknown Unknown

    hi Larry, thank you for the intro to doT.js.
    What doT.templateSettings { strip: true} do? does it trim the white spaces around the fields?

  • Ani Agajanian

    Unknown Unknown

    Hi Larry, we are using the doT at my work to generate narratives based on field values. Want to say thank you for putting together this example, it was pretty helpful.