jquery tmpl模板（实例讲解)

之前用模板渲染都是用棱角分明，无意间发现了jquery tmpl这种轻量级，其文档在这里

官方解释对该插件的说明：将匹配的第一个元素作为模板，渲染指定的数据，签名如下：tmpl([数据，][选项])其中参数数据的用途很明显：用于提出的数据，可以是任意射流研究…类型，包括数组和对象选项。一般情况下都是选项了，官方指出，此处的选择是一个用户自定义的键值对的地图，继承自tmplItem数据结构，适用于模板提出动作期间。

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

下面是一个简单的例子

！DOCTYPE html html标题jquery模板演示/标题脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。11 .1 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。tmpl。js /脚本ID=' my template ' type=' text/x-jquery-tmpl ' trtd $ { ID }/tdtd $ { Name }/TD/TD $(' # my template ').tmpl(用户)。appendo(' # row ')；});/script style type=' text/CSS ' body { padd : 10px；}表格{边框-折叠：折叠；}/样式/床头柜表格单元格间距='0 '单元格填充='4 '边框=' 1 ' t正文id=' rows '/t正文/表格/正文/html其效果如下

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

脚本id=' templateName '类型=' text/x-jquery-tmpl '/脚本做为模板的包装器，但定义方式并不只有这一种，你可以使用

div id='模板！-标记- /div编译缓存模板，在jQuery .tmpl()中，还可以将模板事先编译并缓存起来，然后在合适的时侯再使用，这对于一些数据嵌套是很有用的，如：

HTML:

表格单元格间距=' 0 '单元格填充=' 4 '边框=' 1 ' t正文id='编译行'/t正文/TableJavaScript :

脚本id='compile1 '类型=' text/x-jquery-tmpl ' { tmpl ' cache ' } } trtd $ { ID }/tdtd $ { Name }/TD/tr/脚本脚本ID=' compile 2 '类型=' type/x-jquery-tmpl ' trtd colspan=' 2 ' $ { Group }/TD/tr/script脚本类型=' text/JavaScript ' $(function(){ var Group Users=[{ ID : ' hao1 '，Name 3360 '$('#compile2 ').模板('缓存');$('#compile1 ').群用户.appendo(' # compileRows ')；});/script其效果如下

$.模板()方法，将一段超文本标记语言编译为模板，示例：

Java脚本语言

定义变量标记=' trtd $ { ID }/tdtd $ { Name }/TD/tr '；$.模板('模板，标记);$.' tmpl('模板，用户)。appendo(' # TemplateRows ')；这样就可以将利润中定义的模板应用于模板行对象。

jQuery .tmpl()的标签，表达式，属性：

${}:从前面的例子来看，这个标签的作用很明显了，相当于是占位符，但是它还有另一种写法{{=field}}如：

脚本ID=' my template ' type=' text/x-jquery-tmpl ' trtd { {=ID } }/tdtd { {=Name } }/TD/tr/script必须要注意的是，'='号后必须跟一个空格，不然是没有效果的。

jQuery .tmpl()有两个比较有用的属性：美元项目、美元数据

$项目代表当前的模板；$数据代表当前的数据。

超文本标记语言

表格单元格间距=' 0 '单元格填充=' 4 '边框=' 1 ' t正文id='属性行'/t正文/TableJavaScript

脚本ID=' property ' type=' text/x-jquery-tmpl ' trtd $ { ID }/tdtd $ { $ data .name }/tdtd $ { $ item。GetLangs('；')}/TD/tr/script script type=' text/JavaScript ' $(function(){ var userLangs=[{ id : ' Hao 1 '，Name: 'Tony '，Langs: ['PHP '，' Python'] }，{ ID: 'hao2 '，Name: 'Mary hui '，Langs: ['Java '，' c# ']}]；$('#property ').tmpl(用户语言，getLangs:函数（分隔符){返回this.data.Langs.join(分隔符);} }).appendo(' # property rows ')；});/脚本

{ {每个}}这个标签一看就知道是做循环用的了，用法如下：(关键词{ {每个数组}}、$value、$index)

超文本标记语言

ul id='ul_each'/ulJavascript

脚本ID=' EachList ' type=' text/x-jquery-tmpl ' Li class=' Li ' span class=' a ' ID : $ { ID }；/span span class=' b ' Name : $ { Name }；/span br/span class=' c ' lang s : ul { }每个langs } } Li $ { $ index 1 } : $ { $ value } ./Li { {/每个} }/ul/span/Li/script script type=' text/JavaScript ' $(function(){ var userLangs=[{ id : ' Hao 1 '，Name: 'Tony '，Langs: ['PHP '，' Python'] }，{ ID: 'hao2 '，Name: 'Mary hui '，lang s 3360[' Java '，' C # ']}；$(' #每个列表').tmpl(用户语言)。appendo(' # ul _ each ')；});/script其效果如下

{ {每个}}还有另一种写法：

爪哇岛描述语言

脚本ID=' EachList 2 ' type=' text/x-jquery-tmpl ' Li class=' Li ' span class=' a ' ID : $ { ID }；/span span class=' b ' Name : $ { Name }；/span br/span class=' c ' lang : ul { }每个(I，lang)Langs } } Li $ { I 1 } : $ { lang }/Li { {/每个} }/ul/span/Li/脚本作用和前一种是一样的。

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

爪哇岛描述语言

脚本ID=' if else ' type=' text/x-jquery-tmpl ' tr TD $ { ID }/TD TD $ { Name }/TD { { if langs }。长度1 } } $ { langs。联接('；')} { { else } } $ { Langs } { {/if } }/TD/tr/script如果Langs数组元素超过一个，则用'; '连接起来，否则就直接显示兰斯，效果如下：

{{html}}，直接将对象属性值作为超文本标记语言代码替换占位符

$.tmplItem()方法，使用这个方法，可以获取从提出出来的元素上重新获取$项目，示例：

$(“t体”).委托(“tr”，“click”，function () { var item=$ .tmplItem(这个);警报（项目。数据。名称);});效果如下：

以上这篇jquery tmpl模板（实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。