首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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文水平不高，对于某些细节难免理解不周，如有谬误之处，敬请指正，谢谢。
    源代码下载

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

    声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

    Javascript 相关文章推荐
    js中cookie的使用详细分析
    May 28 Javascript
    File文件控件，选中文件(图片,flash,视频)即立即预览显示
    Apr 09 Javascript
    jQuery EasyUI API 中文文档 - Dialog对话框
    Nov 15 Javascript
    自己封装的javascript事件队列函数版
    Jun 12 Javascript
    移动设备web开发首选框架：zeptojs介绍
    Jan 29 Javascript
    JS简单实现多级Select联动菜单效果代码
    Sep 06 Javascript
    高效的jquery数字滚动特效
    Dec 17 Javascript
    Javascript原型链的原理详解
    Jan 05 Javascript
    JS生成某个范围的随机数【四种情况详解】
    Apr 20 Javascript
    Bootstrap项目实战之子栏目资讯内容
    Apr 25 Javascript
    js实现前端图片上传即时预览功能
    Aug 02 Javascript
    Vue.js递归组件实现组织架构树和选人功能案例分析
    Jul 03 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
    单向链表(1) 路由(1) 双向链表(6) 扫雷(1) 模拟登录(1) Date(1) Scheduled(1) router(1) NumPy(2) 抽象类(1)
    You might like
    php中用于检测一个地理IP地址是否可用的代码
    2012/02/19 PHP
    PHP的关于变量和日期处理的一些面试题目整理
    2015/08/10 PHP
    PHP中抽象类和抽象方法概念与用法分析
    2016/05/24 PHP
    PHP生成word文档的三种实现方式
    2016/11/14 PHP
    tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
    2018/05/24 PHP
    jquery $.ajax()取xml数据的小问题解决方法
    2010/11/20 Javascript
    实例解析jQuery插件EasyUI最常用的表单验证规则
    2015/11/29 Javascript
    原生JS实现-星级评分系统的简单实例
    2016/08/21 Javascript
    jQuery实现火车票买票城市选择切换功能
    2017/09/15 jQuery
    使用react render props实现倒计时的示例代码
    2018/12/06 Javascript
    Handtrack.js库实现实时监测手部运动(推荐)
    2021/02/08 Javascript
    [01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
    2014/06/30 DOTA
    [03:20]2015国际邀请赛全明星表演赛
    2015/08/08 DOTA
    python 提取文件的小程序
    2009/07/29 Python
    wxPython学习之主框架实例
    2014/09/28 Python
    Python实现获取网站PR及百度权重
    2015/01/21 Python
    Python正则表达式使用经典实例
    2016/06/21 Python
    python 3利用BeautifulSoup抓取div标签的方法示例
    2017/05/28 Python
    win10下安装Anaconda的教程（python环境+jupyter_notebook)
    2019/10/23 Python
    Pytest参数化parametrize使用代码实例
    2020/02/22 Python
    win10下python3.8的PIL库安装过程
    2020/06/08 Python
    Python中的__init__作用是什么
    2020/06/09 Python
    使用ITK-SNAP进行抠图操作并保存mask的实例
    2020/07/01 Python
    用python获取txt文件中关键字的数量
    2020/12/24 Python
    基于 HTML5 WebGL 实现的垃圾分类系统
    2019/10/08 HTML / CSS
    基于IE10/HTML5 开发
    2013/04/22 HTML / CSS
    canvas版人体时钟的实现示例
    2021/01/29 HTML / CSS
    小女主人连衣裙：Little Mistress
    2017/07/10 全球购物
    幼儿教师工作感言
    2014/02/14 职场文书
    公务员政审材料范文
    2014/12/23 职场文书
    2015年复活节活动总结
    2015/02/27 职场文书
    不知如何爱孩子，这些方法教会您
    2019/08/06 职场文书
    Unity连接MySQL并读取表格数据的实现代码
    2021/06/20 MySQL
    Go 中的空白标识符下划线
    2022/03/25 Golang
    mysql的单列多值存储实例详解
    2022/04/05 MySQL
    分享node.js实现简单登录注册的具体代码
    2022/04/26 NodeJs