How to render doT.js templating in nodejs?

StackOverflow https://stackoverflow.com/questions/9207078

Question

Hi I would like to know how can I render output in dot.js templating engine. I think it's a generic question about nodejs templating.(read comments for more info). The reason why I chose this template engine instead of jade or ejs is because it seems the fastest engine around.

Here is my app.js: 

var express = require('express'),
    app = express.createServer(),
    doT = require('doT'),
    pub = __dirname + '/public',
    view =  __dirname + '/views';

app.configure(function(){
    app.set('views', view);
    app.set('view options', {layout: false});
    app.set('view engine', 'dot');
    app.use(app.router);
});

app.register('.html', {
    compile: function(str, opts){
        return function(locals){
            return str;
        }
    }
});


app.get('/', function(req, res){

    //This is where I am trying to send data to the front end....
    res.render('index.html', { output: 'someStuff' });

});

Here is my html:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Index</title>
</head>
<body>

//This is where I am trying to receive data and output it...
{{=it.output}}

</body>
</html>

I just could not find good docs on it. This was not enough: http://olado.github.com/doT/. Please help, if you can. This will improve my understanding exponentially of how data is passed to the view in nodejs. Thank you.

Was it helpful?

Solution

You need to let express know to use doT as the template engine like this:

app.set("view engine", "html");
app.register('.html', doT);

OTHER TIPS

My post is a shameless plug, but it might help someone out.

I wasn't very happy with the way existing modules worked with Express 3.x, I wrote one called dot-emc:

https://github.com/nerdo/dot-emc

Usage is similar to what has been posted above. Install it with nom:

npm install dot-emc

Then set it up as your default view engine. I prefer using the .def extension since my text editor recognizes .dot files as Graphviz files, so the syntax is slightly different:

app.engine("def", require("dot-emc").__express);
app.set("view engine", "def");

Then you can start using it as you would any other view engine in your routes, e.g.:

app.get("/", function(req, res) {
    res.render("index", {"title": "title goes here"});
});

If you're running express 3, it's not supported yet. You can however use express-dot:

npm install express-dot

Then in configure

app.set('view engine', 'dot' );
app.engine('dot', require('express-dot').__express );

Then in routes:

res.render('profile', {}); // you will need to create views/profile.dot

I know this is an old question, but I recently wanted to test doT with a standard generated Express 4.x.x app. I did not find the express example from @olado to match easy with my generated app. I tried different plugins (getting it to work, but not satisfied), so I ended up writing the template engine like this in order to get pre-compiled dot files with support for includes(#) without any extra plugin:

var users = require('./routes/users');
// Standard app above this

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

var app = express();

// view engine setup
app.engine('dot', function(template, options, cb){
    // using .dot files
    var temp = path.parse(template).name;

    var cont = dot[temp](options);

    return cb(null, cont);


    // Or as one liner
    // return cb(null, dot[path.parse(template).name](options));

    // If you want to do error checking, return the error as callback functions first arg
    // return cb(new Error('Something went wrong');
});

app.set('views', path.join(__dirname, './views'));
app.set('view engine', 'dot');

// Standard generated app below this

Now I can use it in the standard "res.render" way in the routes like this (for index.js):

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

Remember to use {{it.value}} in the .dot template files. In basic example above, the index.dot would look something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>{{=it.title}}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>{{=it.title}}</h1>
    <p>Welcome to {{=it.title}}</p>
  </body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top