How can I use Underscore.js templates in conjunction with EJS?

Question

They both use the same syntax for inserting variables. For example if I want the following

<%= username %>

In my Underscore, my main EJS breaks because it tries to replace username and no such variable exists in the main page.

Answer 1

I had this issue and thought I would share the solution I found for solving the issue client side. Here is how your change the escape regex (via underscore.js docs):

_.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
};
var template = _.template( "{{example_value}}");

Changes the <%= %> to {{ }}.

Answer 2

I think square brackets will work in EJS by default:

[%= username %]

And if you need to get fancier, the EJS github page describes how to create custom tags:

var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';

• I think that 2nd "fancier" part might be specific to server-side applications

https://github.com/visionmedia/ejs

Using the client side GitHub example, you'd need to do syntax like this when you render:

var html = require('ejs').render(users, { open: "^%", close: "%^" });

Options are the 2nd parameter of the render().

Answer 3

I had the same issue when I wanted to render the webpage using ejs template on back-end (express), meanwhile I had to use underscore template on front-end.

I tried Marc's answer but it doesn't help, I think it has been out of date to use in newer version. In newer version of ejs(mine is 2.3.3), you can no longer use ejs.open and ejs.close, use ejs.delimiter instead.

I changed the delimiter to '$' in ejs so ejs would only handle with <$ $> tag to insert variables and take <% %> tag as meaningless syntax.

app.set('view engine', 'ejs');
var ejs = require('ejs');
ejs.delimiter = '$';
app.engine('ejs', ejs.renderFile);

NOTE: I add the code above in app.js file in express applications and it worked fine, and if you want to use it on front-end, just pass {'delimiter': '$'} in ejs.render(str, options) as options argument.