jQuery .tmpl(), .template()学习资料小结


Posted in Javascript onJuly 18, 2011

昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里。官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下:

.tmpl([data,][options])

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

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

好吧,先来一个最直观的例子:

<%@ Page Language="C#" AutoEventWireup="true" %> 
<!DOCTYPE html> 
<html> 
<head> 
<title>jquery template demo</title> 
<link rel="stylesheet" href="content/site.css" type="text/css" /> 
<link rel="stylesheet" href="content/jquery.ui.css" type="text/css" /> 
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript" src="scripts/jquery.ui.js"></script> 
<script type="text/javascript" src="scripts/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: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}]; 
$('#myTemplate').tmpl(users).appendTo('#rows'); 
}); 
</script> 
<style type="text/css"> 
body 
{ 
padding: 10px; 
} 
table 
{ 
border-collapse: collapse; 
} 
</style> 
</head> 
<body> 
<table cellspacing="0" cellpadding="3" border="1"> 
<tbody id="rows"> 
</tbody> 
</table> 
</body> 
</html>

jQuery .tmpl(), .template()学习资料小结

例子虽然很小也很简单,但我觉得这个已经很有用了。

当然,.tmpl()还可以使用来自远端的数据,比如说服务:

public ActionResult SampleData() 
{ 
var json = new JsonResult(); 
json.Data = new[] { new { ID = "remote1", Name = "abcd" }, new { ID = "remote2", Name = "efg" } }; 
json.JsonRequestBehavior = JsonRequestBehavior.AllowGet; 
return json; 
}

这是一个MVC的Action,我把它当做是一个提供数据的服务,然后js代码如下:
$('#btnAjax').click(function () { 
$.getJSON('@Url.Action("SampleData", "Home")', function (json) { 
$('#rows').empty(); 
$('#myTemplate').tmpl(json).appendTo('#rows'); 
}); 
});

效果:

jQuery .tmpl(), .template()学习资料小结

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

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

的方式来定义,但是官方文档中说,这种方法可能会产生浏览器无法解析的HTML,因此不推荐使用,不过我试了下,倒没有出什么意外:

HTML:

<div id="container"> 
</div> 
<div id="inline" style="display: none"> 
<label> 
${ID}</label> 
<label> 
${Name}</label><br /> 
</div>

Javascript:
var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}]; 
$('#inline').tmpl(users).appendTo('#container');

效果:

jQuery .tmpl(), .template()学习资料小结

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

<table cellspacing="0" cellpadding="3" 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: 'think8848', Name: 'Joseph Chan', Group: 'Administrators' }, { ID: 'aCloud', Name: 'Mary Cheung', Group: 'Users'}]; 
$('#compile2').template('cached'); 
$('#compile1').tmpl(groupUsers).appendTo('#compileRows'); 
}); 
</script>

效果:

jQuery .tmpl(), .template()学习资料小结

$.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>

必须要注意的是,"="号后必须跟一个空格,不然是没有效果的。
另外,${}中还可以放表达式,这个牛x吧,如:
Html
<table cellspacing="0" cellpadding="3" border="1"> 
<tbody id="expressionRows"> 
</tbody> 
</table>

Javascript
<script type="text/javascript"> 
$(function () { 
var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; 
$('#expression').tmpl(userLangs).appendTo('#expressionRows'); 
}); 
</script>

效果:

jQuery .tmpl(), .template()学习资料小结

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

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

Html

<table cellspacing="0" cellpadding="3" 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: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; 
$('#property').tmpl(userLangs, { 
getLangs: function (separator) { 
return this.data.Langs.join(separator); 
} 
}) 
.appendTo('#propertyRows'); 
}); 
</script>

效果:

jQuery .tmpl(), .template()学习资料小结

{{each}}这个标签一看就知道是做循环用的了,用法如下:

Html

<ul id="eachList"> 
</ul>

Javascript
<script id="each" type="text/x-jquery-tmpl"> 
<li>ID: ${ID}; Name: ${Name};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}<ul></li> 
</script> 
<script type="text/javascript"> 
$(function () { 
var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; 
$('#each').tmpl(userLangs).appendTo('#eachList'); 
});

效果:

jQuery .tmpl(), .template()学习资料小结

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

Javascript

      
  • ID: ${ID}; Name: ${Name};
    Langs:
      {{each(i,lang) Langs}}
    • ${i + 1}:
    • {{/each}}
  • 作用和前一种是一样的。

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

    Javascript

     
          
    ${ID} ${Name} {{if Langs.length > 1}}${Langs.join('; ')}{{else}}${Langs}{{/if}}

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

    jQuery .tmpl(), .template()学习资料小结

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

    Javascript

     
          
    ${ID} ${Name} {{html Ctrl}}
        $(function () {
            var ctrls = [{ ID: 'think8848', Name: 'Joseph Chan', Ctrl: '' }, { ID: 'aCloud', Name: 'Mary Cheung', Ctrl: ''}];
            $('#html').tmpl(ctrls).appendTo('#htmlRows');
        });

    效果:

    jQuery .tmpl(), .template()学习资料小结

    {{tmpl}},前面已经提过该标签了,这里再给一个使用参数的例子:

    Javascript

           
        
    ${ID} ${Name} {{tmpl($data) '#tmpl2'}}
        {{each Langs}}${$value}  {{/each}}   
        $(function () {
            var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}];
            $('#tmpl1').tmpl(userLangs).appendTo('#tmplRows');
        });

    效果:

    jQuery .tmpl(), .template()学习资料小结

    {{wrap}},包装器,这回不需要指定对哪一个元素使用模板了,直接生成模板的包装器,示例:

    Html

     

    Javascript

    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        

    One

        
            First content
        
        

    Two

        
            And more content...
        
    {{/wrap}}
        
            {{each $item.html("h3", true)}}
                
                    ${$value}
                
            {{/each}}
        
        
            {{each $item.html("div")}}
                
                    {{html $value}}
                
            {{/each}}
        
        $(function () {
            $('#myTmpl').tmpl().appendTo('#wrapDemo');
        });

    效果:

    jQuery .tmpl(), .template()学习资料小结

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

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

    效果:

    jQuery .tmpl(), .template()学习资料小结

    至此,官方的API中介绍的内容就完了,我的E文水平不高,对于某些细节难免理解不周,如有谬误之处,敬请指正,谢谢。
    源代码下载

    Javascript 相关文章推荐
    firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
    Apr 12 Javascript
    jQuery对象[0]是什么含义?
    Jul 31 Javascript
    JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
    Nov 09 Javascript
    最流行的Node.js精简型和全栈型开发框架介绍
    Feb 26 Javascript
    js实现使用鼠标拖拽切换图片的方法
    May 04 Javascript
    jQuery模拟实现的select点击选择效果【附demo源码下载】
    Nov 09 Javascript
    使用Angular.js实现简单的购物车功能
    Nov 21 Javascript
    jquery Banner轮播选项卡
    Dec 26 Javascript
    JS 中document.write()的用法和清空的原因浅析
    Dec 04 Javascript
    angularjs结合html5实现拖拽功能
    Jun 25 Javascript
    微信小程序左滑删除功能开发案例详解
    Nov 12 Javascript
    vue iview 隐藏Table组件里的某一列操作
    Nov 13 Javascript
    JS仿flash上传头像效果实现代码
    Jul 18 #Javascript
    js中的string.format函数代码
    Aug 11 #Javascript
    关于html+ashx开发中几个问题的解决方法
    Jul 18 #Javascript
    TreeView 用法(有代码)(asp.net)
    Jul 15 #Javascript
    基于jquery实现的鼠标滑过按钮改变背景图片
    Jul 15 #Javascript
    jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
    Jul 15 #Javascript
    js实现addClass,removeClass,hasClass的函数代码
    Jul 13 #Javascript
    You might like
    实用函数10
    2007/11/08 PHP
    修改apache配置文件去除thinkphp url中的index.php
    2014/01/17 PHP
    PHP使用redis消息队列发布微博的方法示例
    2017/06/22 PHP
    tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
    2018/05/24 PHP
    php链式操作的实现方式分析
    2019/08/12 PHP
    thinkPHP5使用Rabc实现权限管理
    2019/08/28 PHP
    学习ExtJS Column布局
    2009/10/08 Javascript
    JavaScript 学习笔记(六)
    2009/12/31 Javascript
    基于jquery的高性能td和input切换并可修改内容实现代码
    2011/01/09 Javascript
    JQuery中根据属性或属性值获得元素(6种情况获取方法)
    2013/01/17 Javascript
    Javascript基础教程之while语句
    2015/01/18 Javascript
    移动手机APP手指滑动切换图片特效附源码下载
    2015/11/30 Javascript
    用自定义图片代替原生checkbox实现全选,删除以及提交的方法
    2016/10/18 Javascript
    js实现旋转木马效果
    2017/03/17 Javascript
    使用jQuery实现页面定时弹出广告效果
    2017/08/24 jQuery
    浅析node.js的模块加载机制
    2018/05/25 Javascript
    浅谈bootstrap layer.open中end的使用方法
    2019/09/12 Javascript
    JavaScript字符串处理常见操作方法小结
    2019/11/15 Javascript
    JS函数进阶之继承用法实例分析
    2020/01/15 Javascript
    [02:15]2015国际邀请赛选手档案IG.Ferrari 430
    2015/07/30 DOTA
    分析python切片原理和方法
    2017/12/19 Python
    数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
    2018/07/09 Python
    pyqt5 从本地选择图片 并显示在label上的实例
    2019/06/13 Python
    python算法题 链表反转详解
    2019/07/02 Python
    浅谈python3中input输入的使用
    2019/08/02 Python
    python3多线程知识点总结
    2019/09/26 Python
    scrapy处理python爬虫调度详解
    2020/11/23 Python
    python 实现Harris角点检测算法
    2020/12/11 Python
    pyx文件 生成pyd 文件用于 cython调用的实现
    2021/03/04 Python
    世界上最大的专业美容用品零售商:Sally Beauty
    2017/07/02 全球购物
    初中生学习生活的自我评价
    2013/11/20 职场文书
    祖国在我心中演讲稿400字
    2014/05/04 职场文书
    学校党委干部个人对照检查材料思想汇报
    2014/10/09 职场文书
    大学生国家助学金感谢信
    2015/01/23 职场文书
    Mysql - 常用函数 每天积极向上
    2021/04/05 MySQL
    VUE解决跨域问题Access to XMLHttpRequest at
    2022/05/06 Vue.js