javascript - Boolean checks in underscore templates

Question

I had to replace the default underscore teplating delimiters/Interpolate regex for compatibility with asp.net webforms.From the website i opted for mustache like syntax

_.templateSettings = {
  interpolate : /{{(.+?)}}/g
};

tried this

_.template("{{if(loggedIn)Welcome {{name}}}}",{name:"James",completed:true});

but seems this is not the way( since a error occurred) to check boolean expression using a templating system. But from the docs seems it is possible

as well as execute arbitrary JavaScript code, with <% … %>

• So how do i execute arbitrary js code with the above mentioned interpolation

Answer 1

Your problem is that you're defining a Mustache-style replacement for <%= ... %> but trying to use it where you'd normally use <% ... %>. From the fine manual:

Define an interpolate regex to match expressions that should be interpolated verbatim, an escape regex to match expressions that should be inserted after being HTML escaped, and an evaluate regex to match expressions that should be evaluated without insertion into the resulting string.

So there are three regexes in play:

1. interpolate is for <%= ... %>.
2. escape is for <%- ... %>.
3. evaluate is for <% ... %>.

You're telling Underscore to use {{ ... }} in place of <%= ... %> and then you're getting an error because if(loggedIn) can't be interpolated. You just need to fix your _.templateSettings to reflect what you're trying to do:

_.templateSettings = {
    evaluate:    /{{(.+?)}}/g,
    interpolate: /{{=(.+?)}}/g
};

and then your template would look like this:

{{ if(loggedIn) { }}Welcome {{= name }} {{ } }}

Demo: http://jsfiddle.net/ambiguous/RwgVg/8/

You'll need to include the { and } in the template because _.template adds semicolons when compiling the template, that results in things like:

if(loggedIn) {; ...

(Thanks to JaredMcAteer for pointing this out).

You might want to add an escape regex as well, that would probably be /{{-(.+?)}}/g.