javascript - HTML 中的下划线模板生成神秘的 404 错误

Question

好的，我有这个下划线模板(简化版)，从 _template.html.erb 呈现，在我的 Rails 应用程序的页面某处:

<script type="text/html" id="mytemplate">
<div class="foo">
  <img src="{{= my_variable }}" />
</div>
</script>

然后我在其他地方需要时像这样渲染它:

// change it to mustache-style because of defaults clashing with erb
_.templateSettings = {
  interpolate: /\{\{\=(.+?)\}\}/g,
  evaluate: /\{\{(.+?)\}\}/g
};

options = {
  my_variable: '/foo/bar/baz.img'
}

compiled = _.template($("#mytemplate").html());
$(compiled(options)).appendTo("#wherever");

这在理论上应该工作得很好而且确实如此，除了像这样的错误开始在服务器日志和其他地方弹出，浏览器在 URL 上 404-ing 像:http://example.com/{{= %20my_variable%20}}，或 http://example.com/foo/{{=%20my_variable%20}}。

现在，我的直觉是它与以下事实有关:它是一个img 标签，并且浏览器以某种方式尝试GET它来自页面，即使它被包裹在 script 标签中，但我不知道为什么。这是许多人推荐的将下划线模板嵌入 HTML 的方法之一。而且我不能将其归因于旧版浏览器和/或机器人，因为服务器日志显示这些是使用最新 Chrome 等的真人。

编辑:经过更多调查，1. 它只发生在少数人身上(唯一 IP)2. 他们都在使用最新版本的 Chrome。所以也许这是一个失控的扩展？

有什么想法吗？

Answer 1

您必须将 type="text/html" 更改为不存在的内容，例如 type="x-template"(或任何其他内容)

如果缓存已全部清除，这通常有效。

如果真的没有什么作用，那么您可以使用外部模板(您加载的文件)。但是如果你想让它们保持内联，那么转义有问题的字符(使用内部 JS 字符编码)。这将由 JS 进行相同的解析，但不会被 HTML 解析器捕获。

您可以使用此工具:http://mothereff.in/js-escapes (取消选中“仅转义非 ASCII 和不可打印的 ASCII 字符”框)

这就是它的样子:

<script type="text/html" id="mytemplate">
<div class="foo">
  \x3Cimg src="{{= my_variable }}" />
</div>
</script>