0

doT.js Beginner here, so be gentle. I'm trying to start simple with the framework. After reading through the front page, I was able to get all the examples there to work. However, porting doT.js to my own solution appears to be more of a challenge than I first imagined.

I'm trying to create a simple table using doT.js to render its contents.

JsFiddle here.

Using doT.js's own editor, I was able to get this very simple block of code working:

{{~it :v:i}}
<tr>
   <td>{{= i+1 }}</td>
   <td>{{= v }}</td>
</tr>
{{~}}

The rest of my script is:

var conts = ['apples','pears','peaches','cherries'];
var popConts = doT.template(contactsTmpl)(conts);
$("#contactsList").html(popConts);

The first line declares the data, the second binds it to my template, and the third inserts it into the DOM. Doing this, however, results in [object HTMLScriptElement] showing up where I was hoping to see my table contents.

Could anyone explain to me in a simple manner what I am missing here?

invot
  • 533
  • 7
  • 30

1 Answers1

0

One step was missing. Updated jsFiddle: https://jsfiddle.net/oe1d3a0w/1/

var conts = ['apples','pears','peaches','cherries'];
var contactsTmpl = $("#contactsTmpl").html();
var popConts = doT.template(contactsTmpl)(conts);
$("#contactsList").html(popConts);
  1. Declare the data
  2. get the content of the template
  3. bind the content of the template to the data
  4. Insert your results into the DOM

doT.tempalte() does not automatically bind to something by id but instead intakes its expressions directly.

invot
  • 533
  • 7
  • 30