jQuery和HTML5的模板标签

跋涉

我想使用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 /节点服务器,因此我不能仅使用{{和}}。

损失负责人

我也喜欢使用模板标记的想法,并且我试图使下划线模板以各种方式在html5模板元素中工作。不幸的是,template元素专门表示一个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冲突的正常问题并以脚本形式执行这些模板。

(不过,这将仅限于现代浏览器,而无需深入研究如何(或是否)可以在较旧的浏览器中检索模板元素的内容并将其呈现为可搜索的片段。)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从HTML5模板标签克隆和修改

来自分类Dev

如何从HTML5模板标签克隆和修改

来自分类Dev

HTML5 CSS和Rails模板

来自分类Dev

HTML5:超链接和新标签

来自分类Dev

公寓列表的HTML5标签和微数据

来自分类Dev

IE 8和IE 7中的HTML5标签

来自分类Dev

桌面和移动导航的HTML5标签和角色

来自分类Dev

HTML5视频标签的宽度和高度

来自分类Dev

IE 8和IE 7中的HTML5标签

来自分类Dev

公寓列表的HTML5标签和微数据

来自分类Dev

如何同时使用html5图片标签和Bootstrap

来自分类Dev

获取jQuery的高度标签html5 <embed>

来自分类Dev

让 Jquery 在 html5 <template> 标签中使用 div

来自分类Dev

音频标签HTML5

来自分类Dev

音频标签HTML5

来自分类Dev

自闭标签或空元素是HTML5中的开始标签和结束标签组合吗?

来自分类Dev

CSS3 HTML5和JQuery矩阵

来自分类Dev

使用HTML5,Ajax和jQuery发送表单

来自分类Dev

jQuery隐藏和显示HTML5数据属性

来自分类Dev

jQuery基于html5数据属性的显示和隐藏

来自分类Dev

使用HTML5,Ajax和jQuery发送表单

来自分类Dev

CSS3 HTML5和JQuery矩阵

来自分类Dev

HTML5模板标记代码的组织

来自分类Dev

<article> HTML5标签的Xpath

来自分类Dev

HTML5 Video&Source标签

来自分类Dev

html5的视频标签后的空格

来自分类Dev

HTML5的视频标签(默认图片)

来自分类Dev

检测HTML5视频标签

来自分类Dev

延迟加载HTML5图片标签