jquery和HTML5 5的模板标签

Question

我想要使用underscorejs的模板功能。看来HTML5 5的<template>标签非常适合这一点，但是有一个障碍.underscorejs内插标记(<%和%> get 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-下划线-模板”，那么它看起来很棒：

$('.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 /节点服务器，它使用工具栏作为服务器端的模板系统，所以不能只使用{{和}。

Answer 1

我还喜欢使用模板标记的想法，并试图使下划线模板在html5模板元素中以各种方式工作。不幸的是，模板元素具体地意味着一个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(), {...});

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

(不过，这将仅限于现代浏览器，而不需要对如何(或者如果)检索旧浏览器中的模板元素内容并将其呈现为可搜索的片段进行相当深入的调查。)