如何将Underscore.js模板与EJS结合使用?

时间:2012-04-23 14:12:04

标签: javascript node.js underscore.js ejs

它们都使用相同的语法来插入变量。例如,如果我想要以下

<%= username %>

在我的下划线中,我的主要EJS中断,因为它试图替换用户名,主页中不存在这样的变量。

4 个答案:

答案 0 :(得分:10)

我有这个问题并且认为我会分享我找到的解决客户端问题的解决方案。以下是您更改escape regex的方法(通过underscore.js docs):

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

更改&lt;%=%&gt;到{{}}。

答案 1 :(得分:9)

我认为方括号默认在EJS中起作用:

[%= username %]

如果你需要变得更加漂亮,EJS github页面描述了如何创建自定义标签:

var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';
  • 我认为第二个“发烧友”部分可能特定于服务器端应用程序

https://github.com/visionmedia/ejs

使用客户端GitHub示例,渲染时需要执行以下语法:

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

选项是render()的第二个参数。

答案 2 :(得分:1)

当我想在后端(快速)使用ejs模板渲染网页时,我遇到了同样的问题,同时我不得不在前端使用下划线模板。

我尝试过Marc的答案,但它没有帮助,我认为在新版本中使用它已经过时了。在较新版本的ejs中(我的2.3.3},您无法再使用ejs.openejs.close,而是使用 ejs.delimiter

我在ejs中将分隔符更改为“$”,因此ejs只会使用<$ $>标记来处理变量并将<% %>标记作为无意义的语法。

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

注意:我在快速应用程序的app.js文件中添加了上面的代码并且工作正常,如果您想在前端使用它,只需在{'delimiter': '$'}中传递ejs.render(str, options)即可作为选项参数。

答案 3 :(得分:0)

我最近遇到了这个问题而且我不想重新配置EJS,所以我改变了下划线插值,计算和转义值的方式。

默认情况下,以下是当前下划线模板设置:

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

然后我将设置更新为:

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

换句话说,上面的代码段将在下划线中更改以下内容:

  • <强>插值

    • 来自:<%= ... %>
    • 收件人:{{= ... }}
    • 表达:/\{\{=([^}]*)\}\}/g
  • <强>评估

    • 来自:<% ... %>
    • 收件人:{{ ... }}
    • 表达:/\{\{(?!=)(.*?)\}\}/g
  • <强>逃逸

    • 来自<%- ... %>
    • 收件人:{{- ... }}
    • 表达:/\{\{-([^}]*)\}\}/g

然后我的下划线模板如下所示:

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

...我的EJS模板保持不变,我可以继续使用默认的ERB语法来插值/评估值:<% ... %><%= ... %>

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