Question

我想做这样的事情：

<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>

我怎样才能做到这一点？

Answer 1

下划线模板有three distinct regexes：

定义插值正则表达式以匹配应逐字插值的表达式，转义正则表达式以匹配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，而不是对其进行评估。

Answer 2

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

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

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

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

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

2 个答案: