使用Underscore.js与ASP.NET

Question

我一直在比较不同的JavaScript模板引擎，以确定哪个可以为大量数据提供最佳性能。其中我了解到一个名为Underscore.js的引擎。然而，我无法让任何示例正常运行。我的模板看起来像：

<% _.each(projects(), function(project) { %>
   <tr>
      <td><%= project.code %></td>
      <td><%= project.request %></td>
      <td><%= project.stage %></td>
      <td><%= project.type %></td>
      <td><%= project.launch %></td>
   </tr>
<% }) %>

然而，当我运行该页面时，我会得到一个服务器端的ASP.NET异常，因为它正尝试编译<% ... %>标签中的文本：

Compiler Error Message: CS1026: ) expected
Line 826:                     <% _.each(projects(), function(project) { %>

我无法找到逃脱这些标签的方法，也无法找到配置Underscore使用不同语法的方法。是否有解决方法，或者Underscore和ASP.NET根本不兼容？

- Mike Christensen

Answer 1

在JSP中也存在相同的问题，因此我们这样处理：

_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g,      // print value: {{ value_name }}
                      evaluate    : /\{%([\s\S]+?)%\}/g,   // excute code: {% code_to_execute %}
                      escape      : /\{%-([\s\S]+?)%\}/g}; // excape HTML: {%- <script> %} prints &lt;script&gt;

这将允许您使用标签的各种版本输出：插值、评估和转义。

- tkone

---

谢谢！这段代码帮了我很多忙。我已经让它起作用了，但是现在页面加载时有10-15秒的延迟，不知道出了什么问题。不过实际绑定并没有比jQuery.tmpl更快，所以我可能会回到使用它。 - Mike Christensen

是的，我不认为它很快，但既然我们正在为我们的网站使用Backbone并已经安装了Underscore，那么也可以使用它。当然，我们也有jQuery... - tkone

啊，当我将 underscore-min.js 文件复制到本地时，延迟问题消失了，看来是因为服务器太慢了。实际上，对于较小的数据集，它似乎更快一些，而对于较大的数据集则差不多。我可能会保留它。 - Mike Christensen

@MikeChristensen 是的，它一点也不差。即使在我的情况下，它的缓慢也被事实所抵消，因为它始终可用，无需加载任何额外的内容。 - tkone

Answer 2

<% 是asp.net中使用的标签。当页面被解析时，它尝试解释这些标签，但是asp.net无法理解该语法，因为它期望的是C#代码而不是javascript。

您可以在templateSettings中更改插值符号，例如将其更改为{ }和{{ }}

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

var template = _.template("Hello {{ name }}!");
template({name : "Mustache"});
=> "Hello Mustache!"

文档

---

顺便提一下，这些是默认设置：

// By default, Underscore uses ERB-style template delimiters, change the
// following template settings to use alternative delimiters.
_.templateSettings = {
  evaluate    : /<%([\s\S]+?)%>/g,
  interpolate : /<%=([\s\S]+?)%>/g,
  escape      : /<%-([\s\S]+?)%>/g
};

- Didier Ghys

---

那只是修复其中一个标签集。 - tkone

太好了！这绝对有帮助。+1 - Mike Christensen

Answer 3

替换：

<% }) %>

更改为：

<% }); %>

祝你好运!!!

- Christian Shica Sivipaucar