如何将Underscore.js模板与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.

Answer 4

I recently ran into this issue and I didn't want to reconfigure EJS, so I changed how underscore interpolates, evaluates, and escapes values.

By default, here are the current underscore templating settings:

_.templateSettings = {
  interpolate: /<%([\s\S]+?)%>/g,
  evaluate: /<%=([\s\S]+?)%>/g,
  escape: /<%-([\s\S]+?)%>/g
};

Then I updated the settings to:

_.templateSettings = {
  interpolate: /\{\{=([^}]*)\}\}/g,
  evaluate: /\{\{(?!=)(.*?)\}\}/g,
  escape: /\{\{-([^}]*)\}\}/g
};

In other words, the snippet above will change the following in underscore:

• Interpolate

  • From: <%= ... %>
  • To: {{= ... }}
  • Expression: /\\{\\{=([^}]*)\\}\\}/g

• Evaluate

  • From: <% ... %>
  • To: {{ ... }}
  • Expression: /\\{\\{(?!=)(.*?)\\}\\}/g

• Escape

  • From <%- ... %>
  • To: {{- ... }}
  • Expression: /\\{\\{-([^}]*)\\}\\}/g

Then my underscore template looks like this:

// Underscore
<script type="text/template">
  <ul>
  {{ _.each(collection, function(model) { }}
    <li>{{= model.text }}</li>
    <li>{{- model.textEscaped }}</li>
  {{ }); }}
  </ul>
</script>

...and my EJS templates remain the same and I can continue to use the default ERB syntax to interpolate/evaluates values: <% ... %> and <%= ... %> :

// EJS
<% if (isAuthenticated) { %>
  <%= user.displayName %>
<% } %>