Question

我想使用underscorejs的模板功能。似乎HTML5的<template>标签对此非常适合，但是有一个障碍......下划线插值标签（<%和%>得到html转义，所以HTML内部模板标签看起来像这样：

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

=＆GT;

"
  <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()

=＆GT;

"
  <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服务器，我不能只使用{{和}}。

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(), {...});

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

（但是，这仍然局限于现代浏览器，而没有深入研究如何（或者可能）如何（或者可能）您可以在旧浏览器中检索模板元素内容并将其呈现为可搜索的片段。）

jquery和HTML5的模板标记

1 个答案: