jquery 和 HTML5 的模板标签

Question

我想使用 underscorejs 的模板功能。好像是 HTML5 的 <template>标签非常适合这个，但有一个障碍......underscorejs 插值标签(<% 和 %> 得到 html 转义，所以模板标签内的 HTML 看起来像这样:

$('template.new-email').html()

=>

"
  <div class="email">
    <div class="timestamp">
      &lt;%= received %&gt;
    </div>
    <div class="from">
      &lt;%= from %&gt;
    </div>
    <div class="title">
      &lt;%= title %&gt;
    </div>
    <div class="message">
      &lt;%= message %&gt;
    </div>
  </div>
"

好吧，那糟透了。

现在，事实证明，如果我使用带有虚构类型的脚本标记，例如“x-underscore-templates”，那么它看起来很笨拙:

$('.new-email').html()

=>

"
  <div class="email">
    <div class="timestamp">
      <%= received %>
    </div>
    <div class="from">
      <%= from %>
    </div>
    <div class="title">
      <%= title %>
    </div>
    <div class="message">
      <%= message %>
    </div>
  </div>
"

所以我的问题是——我可以使用模板标签吗？如何在字符串中只获取我需要的字符，以便将它们传递给下划线的模板系统？

注意 - 由于我现在使用的服务器是 hapijs/node 服务器，它使用 handlebars 作为服务器端模板系统，我不能只使用 {{ 和 }}。

Answer 1

我也喜欢使用模板标签的想法，并且我尝试以各种方式使下划线模板在 html5 模板元素中工作。不幸的是，template element特别是指 html 模板，内容将被转换为文档片段，这不适用于许多有效的下划线模板，即使它们稍后会呈现为有效的 html。

因此，我可以建议的唯一用法是您可以将脚本元素组织在一个模板元素中，如下所示:

<template class="underscore-templates">
 <script id="new-email">
   <div class="email">
     <div class="timestamp">
       <%= received %>
     </div>
     <div class="from">
       <%= from %>
     </div>
     <div class="title">
       <%= title %>
     </div>
     <div class="message">
        <%= message %>
     </div>
   </div>
 </script>
 <script id="other">
 </script>
</template>

然后将它们隔离以安全地执行以下操作:

var templates = $('.underscore-templates').prop('content');
_.template($(templates).children('#new-email').html(), {...});

以模板元素作为作用域，以防止常见的 id 冲突问题并将这些模板作为脚本执行。

(不过，这仅限于现代浏览器，而没有深入研究如何(或可能)在旧浏览器中检索模板元素内容并将其呈现为可搜索的片段。)