如何使用小胡子符号在下划线中评估 javascript 函数？答案

【问题标题】：How to evaluate javascript functions in underscore with mustache notation?如何使用小胡子符号在下划线中评估 javascript 函数？
【发布时间】：2014-03-05 14:26:51
【问题描述】：

我想做这样的事情：

<script id="tmpl-books" type="text/template">
  <ul>
    <% for (var i = 0; i < books.length; i++) { %>
      <% var book = books[i]; %>
      <li>
      <em><%= book.title %></em> by <%= book.author %>
      </li>
    <% } %>
  </ul>
</script>

在我的代码中，但是我使用的是 JSP，所以我必须使用 {{ }} 表示法，但是当我这样做时 {{ for(var... }} 不起作用。

<script id="tmpl-books" type="text/template">
      <ul>
        {{ for (var i = 0; i < books.length; i++) { }}
          <% var book = books[i]; %>
          <li>
          <em>{{= book.title }}</em> by {{ book.author }}
          </li>
        {{ } }}
      </ul>
    </script>

我怎样才能做到这一点？

【问题讨论】：

你的_.templateSettings是什么样的？
_.templateSettings = { 插值：/\{\{(.+?)\}\}/g };

标签： javascript underscore.js templating underscore.js-templating

【解决方案1】：

下划线模板有three distinct regexes:

定义一个 interpolate 正则表达式来匹配应该逐字插入的表达式，一个 escape 正则表达式来匹配应该在 HTML 转义后插入的表达式，以及一个评估正则表达式以匹配应该在不插入结果字符串的情况下进行评估的表达式。

如果您想使用 Handlebars-ish 分隔符，您需要定义所有三个，而不仅仅是 interpolate 正则表达式：

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

另请注意，interpolate 和 escape 正则表达式必须匹配 evaluate 因the order that the regexes are applied in 而不会匹配的内容。

使用这些模板设置，这样的模板：

<script id="tmpl-books" type="text/template">
    <ul>
        {{ for (var i = 0; i < books.length; i++) { }}
            {{ var book = books[i]; }}
            <li>
                <em>{{= book.title }}</em> by {{= book.author }}
           </li>
        {{ } }}
    </ul>
</script>

应该可以。请注意从 {{ book.author }} 到 {{= book.author }} 的变化，因为您是在插值 book.author，而不是对其进行评估。

【讨论】：

会是 {{ var book = books[i] }} 因为
抱歉，错过了var，现已修复。

【解决方案2】：

就我的经验而言，最好的方法是像这样明显地覆盖三个正则表达式：

_.templateSettings.evaluate = /\{\{(.+?)\}\}/g;
_.templateSettings.interpolate = /\{\{=(.+?)\}\}/g;
_.templateSettings.escape = /\{\{-(.+?)\}\}/g;

无需像这样替换整个对象_.templateSettings：

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

【讨论】：