编程 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}: ${lang}.
{{/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:

One

First content

Two

And more content...

${$value}

$(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 相关文章推荐

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