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 相关文章推荐
    打开超链需要“确认”对话框的方法
    Mar 08 Javascript
    js模拟类继承小例子
    Jul 17 Javascript
    Wordpress ThickBox 点击图片显示下一张图的修改方法
    Dec 11 Javascript
    JavaScript 盒模型 尺寸深入理解
    Dec 31 Javascript
    Jquery动态更改一张位图的src与Attr的使用
    Jul 31 Javascript
    Jquery常用的方法汇总
    Sep 01 Javascript
    跟我学习javascript的arguments对象
    Nov 16 Javascript
    用Vue-cli搭建的项目中引入css报错的原因分析
    Jul 20 Javascript
    React Native 集成jpush-react-native的示例代码
    Aug 16 Javascript
    validform表单验证的实现方法
    Mar 08 Javascript
    vue基于better-scroll仿京东分类列表
    Jun 30 Javascript
    JavaScript 判断数据类型的4种方法
    Sep 11 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 采集获取指定网址的内容
    2010/01/05 PHP
    php线性表顺序存储实现代码(增删查改)
    2012/02/16 PHP
    php+ajax无刷新分页实例详解
    2015/12/07 PHP
    浅析PHP类的反射来实现依赖注入过程
    2018/02/06 PHP
    HTA版JSMin(省略修饰语若干)基于javascript语言编写
    2009/12/24 Javascript
    js封装的textarea操作方法集合(兼容很好)
    2010/11/16 Javascript
    JavaScript汉诺塔问题解决方法
    2015/04/21 Javascript
    谈一谈jQuery核心架构设计
    2016/03/28 Javascript
    jQuery实现的倒计时效果实例小结
    2016/04/16 Javascript
    详解JavaScript权威指南之对象
    2016/09/27 Javascript
    微信小程序 页面跳转传值实现代码
    2017/07/27 Javascript
    JS写谷歌浏览器chrome的外挂实例
    2018/01/11 Javascript
    Node.js笔记之process模块解读
    2018/05/31 Javascript
    在Vue项目中使用snapshot测试的具体使用
    2019/04/16 Javascript
    vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
    2019/07/08 Javascript
    微信小程序实现写入读取缓存详解
    2019/08/30 Javascript
    解决在Vue中使用axios POST请求变成OPTIONS的问题
    2020/08/14 Javascript
    纯js+css实现在线时钟
    2020/08/18 Javascript
    Python使用urllib2获取网络资源实例讲解
    2013/12/02 Python
    使用Python3内置文档高效学习以及官方中文文档
    2019/05/19 Python
    处理Selenium3+python3定位鼠标悬停才显示的元素
    2019/07/31 Python
    基于MATLAB和Python实现MFCC特征参数提取
    2019/08/13 Python
    基于torch.where和布尔索引的速度比较
    2020/01/02 Python
    sqlalchemy实现时间列自动更新教程
    2020/09/02 Python
    捷克购买家具网站:JENA nábytek
    2020/03/19 全球购物
    土木工程毕业生自荐信
    2013/11/12 职场文书
    学生干部的自我评价分享
    2014/01/18 职场文书
    北京大学自荐信范文
    2014/01/28 职场文书
    五年级学生评语大全
    2014/12/26 职场文书
    2015选调生工作总结
    2015/07/24 职场文书
    医疗纠纷调解协议书
    2015/08/06 职场文书
    会计主管竞聘书
    2015/09/15 职场文书
    Pytorch中的学习率衰减及其用法详解
    2021/06/05 Python
    SQL实现LeetCode(178.分数排行)
    2021/08/04 MySQL
    Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
    2022/04/06 数码科技
    Redis基本数据类型Zset有序集合常用操作
    2022/06/01 Redis