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.masonry瀑布流效果
May 25 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery+ajax实现用户登录验证
Sep 13 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 存储文本换行实现方法
2010/01/05 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
详解php反序列化
2020/06/10 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
python实现学生管理系统开发
2020/07/24 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
struct和class的区别
2015/11/20 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
银行学习十八大感想
2014/01/11 职场文书
户外活动策划方案
2014/03/12 职场文书
2019年入党思想汇报
2019/03/25 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS