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.

Answer 2

I believe this works for the transition to the mustache style syntax:

/**
     * @configuration transform Underscore.js template syntax
     * @description change the Ruby on Rails style syntax to the Mustache syntax
     * @default <%= var %>
     * @modified 
     *  evaluate        {{ JavaScript code}}    execute arbitrary js code, such as loops
     *  interpolate     {{= variable }}         prints value of variables
     *  escape          {{- variable }}         this syntax will html escape variables
     */ 
    _.templateSettings = {
        evaluate:    /\{\{(.+?)\}\}/g,          
        interpolate: /\{\{=(.+?)\}\}/g,
        escape: /\{\{-(.+?)\}\}/g
    };

This would be mustache style syntax, but keeps the original options of using the "=" and the "-". Not using either evaluates JS, such as for loops. One could swap them around so that the {{var}} was the interpolate and the evaluate could be something else, to keep your templates cleaner if you prefer, since interpolate is most frequently used.

Answer 3

As far as you hasn't overwritten the Underscore.templateSettings.evaluate setting you should still can use: <% ... %> for evaluate code.

I have seen attempts to also define the Underscore.templateSettings.evaluate setting to match with Mustache syntax but Mustache fights very strong against template evaluations so is gonna be difficult.