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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
JQuery省市联动效果实现过程详解
May 08 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/04/13 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
php类自动加载器实现方法
2015/07/28 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
两个数组去重的JS代码
2013/12/04 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
node.js的事件机制
2017/02/08 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python简单操作excle的方法
2018/09/12 Python
python numpy元素的区间查找方法
2018/11/14 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
英语系本科生个人求职信
2013/09/21 职场文书
搞笑爱情保证书
2014/04/29 职场文书
毕业评语大全
2014/05/04 职场文书
药剂专业自荐书
2014/06/20 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
会议主持词开场白
2015/05/28 职场文书
禁毒心得体会范文
2016/01/15 职场文书