HTML 5标准中最新引入的template标签介绍

jackyrong

浏览: 7936284 次
性别:
来自: 广州

最近访客更多访客>>

尘与飞

深情痞子

Crow00

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax/web相关

html5

现在，W3C没闲着，2013年5月，新的标准中，又引入了新的标签template模板，具体
标准见：https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html#template-element
下面综合进行小结下，供各位学习

首先，服务端的模板是不少了，大家也用的不少，现在其实就是客户端的模板，先看例子：


function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  //支持标签
} else {
  
//不支持

上面代码是监测浏览器是否支持这标签了。目前只有chrome 26以上才支持这个标签；

<template id="hhhhold-template">
  <img src="" alt="random hhhhold image">
  <h3 class="title"></h3>
</template>

<script>
  var template = document.querySelector('#hhhhold-template');
  template.content.querySelector('img').src = 'http://hhhhold.com/350x200';
  template.content.querySelector('.title').textContent = 'Random image from hhhhold.com'
  document.body.appendChild(template.content.cloneNode(true));
</script>

   template标签中，给出了模板id，其中这里定义了空的图片，因为这些都是在
运行时动态指定的，
例子中的<SCRIPT>部门，就是通过template.content.querySelector去动态指定
填充模板的内容，记得最后要用：
   document.body.appendChild(template.content.cloneNode(true));才算激活模板；

   <template>标签可以放置在<head>,<body>或者<frameset>当中，也可以放在象table,tr等标签中，比如


<table>
<tr>
  <template id="cells-to-repeat">
    <td>some content</td>
  </template>
</tr>
</table>

但模板暂时还不支持嵌套。
再来个复杂点的例子：

<button onclick="useIt()">Use me</button>
<div id="container"></div>
<script>
  function useIt() {
    var content = document.querySelector('template').content;
   
    var span = content.querySelector('span');
    span.textContent = parseInt(span.textContent) + 1;
    document.querySelector('#container').appendChild(
        content.cloneNode(true));
  }
</script>

<template>
  <div>Template used: <span>0</span></div>
  <script>alert('Thanks!')</script>
</template>

点按钮，就会每次在模板中，不断显示template used:数字（数字不断＋1），
例子其实也很容易理解。

更详细的介绍可以参考：
http://www.html5rocks.com/en/tutorials/webcomponents/template/?redirect_from_locale=zh

2
顶

1
踩

分享到：

powerdesign中逆向工程后name和comment的 ... | Jave EE 7正式获得批准通过

2013-05-22 21:02
浏览 14644
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论