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 相关文章推荐
    学习javascript,实现插入排序实现代码
    Jul 31 Javascript
    js 字符串转换成数字的三种方法
    Mar 23 Javascript
    js实现类似菜单风格的TAB选项卡效果代码
    Aug 28 Javascript
    基于javascript代码实现通过点击图片显示原图片
    Nov 29 Javascript
    基于jQuery的网页影音播放器jPlayer的基本使用教程
    Mar 08 Javascript
    浅谈bootstrap源码分析之scrollspy(滚动侦听)
    Jun 06 Javascript
    在vue中解决提示警告 for循环报错的方法
    Sep 28 Javascript
    使用 vue 实例更好的监听事件及vue实例的方法
    Apr 22 Javascript
    JavaScript实现更换背景图片
    Oct 18 Javascript
    Vue中qs插件的使用详解
    Feb 07 Javascript
    element跨分页操作选择详解
    Jun 29 Javascript
    解决vue中使用less/sass及使用中遇到无效的问题
    Oct 24 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
    十天学会php(1)
    2006/10/09 PHP
    动态生成gif格式的图像要注意?
    2006/10/09 PHP
    用php简单实现加减乘除计算器
    2014/01/06 PHP
    php时间戳转换的示例
    2014/03/31 PHP
    php准确获取文件MIME类型的方法
    2015/06/17 PHP
    php实现socket推送技术的示例
    2017/12/20 PHP
    PHP全局使用Laravel辅助函数dd
    2019/12/26 PHP
    PHP网站常见安全漏洞,及相应防范措施总结
    2021/03/01 PHP
    验证控件与Button的OnClientClick事件详细解析
    2013/12/04 Javascript
    JS判断两个时间大小的示例代码
    2014/01/28 Javascript
    jquery easyui中treegrid用法的简单实例
    2014/02/18 Javascript
    node.js中的buffer.Buffer.byteLength方法使用说明
    2014/12/10 Javascript
    JS实现页面超时后自动跳转到登陆页面
    2015/01/19 Javascript
    javascript相关事件的几个概念
    2015/05/21 Javascript
    一波JavaScript日期判断脚本分享
    2016/03/06 Javascript
    js+html5实现半透明遮罩层弹框效果
    2020/08/24 Javascript
    Vue 技巧之控制父类的 slot
    2020/02/24 Javascript
    [06:25]DOTA2英雄梦之声_第17期_大地之灵
    2014/06/20 DOTA
    [43:35]TI4 循环赛第二日Liquid vs Fnatic
    2014/07/11 DOTA
    python3中bytes和string之间的互相转换
    2017/02/09 Python
    Python使用sorted对字典的key或value排序
    2018/11/15 Python
    Python中遍历列表的方法总结
    2019/06/27 Python
    解决django后台管理界面添加中文内容乱码问题
    2019/11/15 Python
    用opencv给图片换背景色的示例代码
    2020/07/08 Python
    css3 background属性调整增强介绍
    2010/12/18 HTML / CSS
    CSS3 真的会替代 SCSS 吗
    2021/03/09 HTML / CSS
    StubHub巴西:购买和出售您的门票
    2016/07/22 全球购物
    英国最大的电脑零售连锁店集团:PC World
    2016/10/10 全球购物
    Notino罗马尼亚网站:购买香水和化妆品
    2019/07/20 全球购物
    本科应届生求职信
    2014/08/05 职场文书
    党员专题组织生活会发言材料
    2014/10/17 职场文书
    Nginx 根据URL带的参数转发的实现
    2021/04/01 Servers
    Oracle以逗号分隔的字符串拆分为多行数据实例详解
    2021/07/16 Oracle
    Vue.js中v-for指令的用法介绍
    2022/03/13 Vue.js
    SQL Server中使用表变量和临时表
    2022/05/20 SQL Server
    Python时间操作之pytz模块使用详解
    2022/06/14 Python