jquery tmpl模板(实例讲解)


Posted in jQuery onSeptember 02, 2017

之前用模板渲染都是用angular,无意间发现了jquery tmpl这种轻量级,其文档在这里

官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下:

.tmpl([data,][options])

其中参数data的用途很明显:用于render的数据,可以是任意js类型,包括数组和对象。options一般情况下都是选项了,官方指出,此处的options是一个用户自定义的键值对的map,继承自tmplItem数据结构,适用于模板render动作期间。

在这里可以下载到最新的tmpl插件,值的一提的是,官方同时也说明了,tmpl目前是beta版,使用需谨慎..

下面是一个简单的例子

<!DOCTYPE html>
<html>
<head>
 <title>jquery template demo</title>
 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.tmpl.js"></script>
 <script id="myTemplate" type="text/x-jquery-tmpl">
  <tr><td>${ID}</td><td>${Name}</td></tr>
 </script>
 <script type="text/javascript">
  $(function () {
   var users = [{ ID: 'hao1', Name: 'Tony' }, { ID: 'hao2', Name: 'Mary hui'}];
   $('#myTemplate').tmpl(users).appendTo('#rows');
  });
 </script>
 <style type="text/css">
  body
  {
   padding: 10px;
  }
  table
  {
   border-collapse: collapse;
  }
 </style>
</head>
<body>
 <table cellspacing="0" cellpadding="4" border="1">
  <tbody id="rows">
  </tbody>
 </table>
</body>
</html>

其效果如下

jquery tmpl模板(实例讲解)

定义模板时,推荐的方式为定义使用

<script id='templateName' type='text/x-jquery-tmpl'></script>

做为模板的包装器,但定义方式并不只有这一种,你可以使用

<div id="template" > <!-- markup --></div>

编译缓存模板,在jQuery .tmpl()中,还可以将模板事先编译并缓存起来,然后在合适的时侯再使用,这对于一些数据嵌套是很有用的,如:

HTML:

<table cellspacing="0" cellpadding="4" border="1">
 <tbody id="compileRows">
 </tbody>
</table>

JavaScript:

<script id="compile1" type="text/x-jquery-tmpl">
 {{tmpl 'cached'}}
 <tr><td>${ID}</td><td>${Name}</td></tr>
</script>
<script id="compile2" type="type/x-jquery-tmpl">
 <tr><td colspan="2">${Group}</td></tr>
</script>
<script type="text/javascript">
 $(function () {
  var groupUsers = [{ ID: 'hao1', Name: 'Tony', Group: 'Administrators' }, { ID: 'hao2', Name: 'Mary hui', Group: 'Users'}];
  $('#compile2').template('cached');
  $('#compile1').tmpl(groupUsers).appendTo('#compileRows');
 });
</script>

其效果如下

jquery tmpl模板(实例讲解)

$.template()方法,将一段Html编译为模板,示例:

JavaScript

var markup = '<tr><td>${ID}</td><td>${Name}</td></tr>';
$.template('template', markup);
$.tmpl('template', users).appendTo('#templateRows');

这样就可以将markup中定义的模板应用于templateRows对象。

jQuery .tmpl()的标签,表达式,属性:

${}:从前面的例子来看,这个标签的作用很明显了,相当于是占位符,但是它还有另一种写法{{= field}}如:

<script id="myTemplate" type="text/x-jquery-tmpl">
 <tr><td>{{= ID}}</td><td>{{= Name}}</td></tr>
</script>

必须要注意的是,"="号后必须跟一个空格,不然是没有效果的。

jQuery .tmpl()有两个比较有用的属性:$item、$data:

$item代表当前的模板;$data代表当前的数据。

Html

<table cellspacing="0" cellpadding="4" border="1">
  <tbody id="propertyRows">
  </tbody>
 </table>

Javascript

<script id="property" type="text/x-jquery-tmpl">
 <tr><td>${ID}</td><td>${$data.Name}</td><td>${$item.getLangs('; ')}</td></tr> </script>
<script type="text/javascript">
  $(function () {
  var userLangs = [{ ID: 'hao1', Name: 'Tony', Langs: ['PHP', 'Python'] }, { ID: 'hao2', Name: 'Mary hui', Langs: ['Java', 'C#']}];
  $('#property').tmpl(userLangs, {
   getLangs: function (separator) {
    return this.data.Langs.join(separator);
   }
   }).appendTo('#propertyRows');
  });
</script>

jquery tmpl模板(实例讲解)

{{each}}这个标签一看就知道是做循环用的了,用法如下:(关键词{{each Array}}、$value、$index)

HTML

<ul id="ul_each"></ul>

Javascript

<script id="eachList" type="text/x-jquery-tmpl">
 <li class="li">
 <span class="a">ID: ${ID};</span>
 <span class="b">Name: ${Name};</span><br/>
 <span class="c">Langs:
  <ul>
  {{each Langs}}
   <li>
   ${$index + 1}:${$value}.
   </li>
  {{/each}}
  </ul>
 </span>
 </li>
</script>
<script type="text/javascript">
 $(function () {
 var userLangs = [{ ID: 'hao1', Name: 'Tony', Langs: ['PHP', 'Python'] }, { ID: 'hao2', Name: 'Mary hui', Langs: ['Java', 'C#']}];
 $('#eachList').tmpl(userLangs).appendTo('#ul_each');
 });
</script>

其效果如下

jquery tmpl模板(实例讲解)

{{each}}还有另一种写法:

Javascript

<script id="eachList2" type="text/x-jquery-tmpl">
 <li class="li">
 <span class="a">ID: ${ID};</span>
 <span class="b">Name: ${Name};</span><br/>
 <span class="c">Langs:
  <ul>
  {{each(i,lang) Langs}}
   <li>
   ${i+1}:${lang}
   </li>
  {{/each}}
  </ul>
 </span>
 </li>
</script>

作用和前一种是一样的。

{{if}}和{{else}},这两个标签应该一看就知道作用了,直接上示例:

Javascript

<script id="ifelse" type="text/x-jquery-tmpl">
  <tr>
  <td>${ID}</td>
  <td>${Name}</td>
  <td>
   {{if Langs.length > 1}}
    ${Langs.join('; ')}
   {{else}}
    ${Langs}
   {{/if}}
  </td>
 </tr>
</script>

如果Langs数组元素超过1个,则用'; '连接起来,否则就直接显示Langs,效果如下:

jquery tmpl模板(实例讲解)

{{html}},直接将对象属性值作为HTML代码替换占位符

$.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item,示例:

$('tbody').delegate('tr', 'click', function () {
 var item = $.tmplItem(this);
 alert(item.data.Name);
});

效果如下:

jquery tmpl模板(实例讲解)

以上这篇jquery tmpl模板(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 #jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 #jQuery
You might like
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python实现图片转字符画的示例代码
2017/08/21 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
python链表类中获取元素实例方法
2021/02/23 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
优秀生推荐信范文
2013/11/28 职场文书
大学军训感言1500字
2014/03/09 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
班主任寄语2015
2015/02/26 职场文书
《山中访友》教学反思
2016/02/24 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers