首页 > 其他分享 >jQuery Templates模板插件

jQuery Templates模板插件

时间:2023-04-17 16:34:59浏览次数:59  
标签:jQuery Templates 插件 Name tmpl item data ID 模板


jQuery团队提供了一个模板插件,但非常可惜的是jquery团队放弃对其维护,我们对其方法和语法进行简单简绍

源码官方的网址:

http://api.jquery.com/category/plugins/templates

文档的网址:

http://api.jquery.com/category/plugins/templates

使用该插件必须先引入对应js

 



//依赖jquery
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
//tmpl核心js文件
<script src="../../../jquery.tmpl.js" type="text/javascript"></script>



 使用的语法:

 

jQuery.tmpl( template [, data] [, options] ) 返回值为: jQuery

template为模板

data为对应数据

options为其它参数

1.这个语法是我们直接使用模板字符串

例子:

 

//模板字符串
var tmpl = '<li><a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>';
$.tmpl( tmpl, dataObject ).appendTo( "ul" );
//或者
$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

 

 

2.还可以定义模板完了使用模板

定义模板:

 



<!--定义模板-->
<script id="movieTemplate" type="text/x-jquery-tmpl">
	<li>
		<b>${Name}</b> (${ReleaseYear})
	</li>
</script>



text/x-jquery-tmpl

 3.编译缓存模板

在jQuery .tmpl()中,还可以将模板事先编译并缓存起来,然后在合适的时侯再使用,这对于一些数据嵌套是很有用的

 



<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>



 

 

使用模板:



<script type="text/javascript">
	//模板数据
	var movies = [
		{ Name: "The Red Violin", ReleaseYear: "1998" },
		{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
		{ Name: "The Inheritance", ReleaseYear: "1976" }
	];
	//movieTemplate为模板id
	$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );
</script>



 temp插件支持的功能:

${}直接显示数据另一种写法{{= field}},里面如果有html标签也不识别

{{html}}显示数据并识别解析标签



<script id="movieTemplate" type="text/x-jquery-tmpl">
	<tr>
		<td>${Title}</td>
		<td class="synopsis">${Synopsis}</td>
		<td class="synopsis">{{html Synopsis}}</td> 
	</tr>
</script>



 

 {{if}} 和 {{else}}支持条件判断



<script id="movieTemplate" type="text/x-jquery-tmpl">
	<tr>
		<td>${Title}</td>
		<td>
			{{if Languages}}
				Alternative languages: <em>${Languages}</em>.
			{{else Subtitles}}
				Original language only... <br/>Subtitles in <em>${Subtitles}</em>.
			{{else}}
				Original version only, without subtitles.
			{{/if}}
		</td>
	</tr>
</script>



{{each}}循环

通过$value来取循环对象值例如$value.Name取到循环对象的Name属性值



<script id="movieTemplate" type="text/x-jquery-tmpl">
	<tr>
		<td>${Title}</td>
		<td>Languages:
			<em>
				{{each Languages}}
					${$value.Name} and ${$value.value}
				{{/each}}
			</em>
		</td>
	</tr>
</script>



{{each}}还有另一种写法



<script id="each2" type="text/x-jquery-tmpl">
	<li>ID: ${ID}; Name: ${Name};<br />Langs:
		<ul>
			<STRONG>
				{{each(i,lang) Langs}}
					<li>${i + 1}: <label>${lang}. </label></li>
				{{/each}}
			</STRONG>
		</ul>
	</li>
</script>



 {{wrap}},包装器,这回不需要指定对哪一个元素使用模板了,直接生成模板的包装器

 

$.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item


$('tbody').delegate('tr', 'click', function () {
    var item = $.tmplItem(this);
     alert(item.data.Name);
});

 

 $.template(),将一段Html编译为模板

 



var markup = '<tr><td>${ID}</td><td>${Name}</td></tr>';
$.template('template', markup);
$.tmpl('template', users).appendTo('#templateRows');

 jQuery .tmpl()有两个比较有用的属性:$item、$data:


$item代表当前的模板;$data代表当前的数据


<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,Templates,插件,Name,tmpl,item,data,ID,模板
From: https://blog.51cto.com/u_16071779/6195453

相关文章

  • 沉浸式翻译 插件推荐 同时显示中文和英文
    安装https://immersive-translate.owenyoung.com/installation特殊浏览器用油猴安装。我用的双核浏览器,内核比较老,就只能用油猴的方式装了,非常好用。......
  • python s12 day13 JavaScript、Dom和jQuery
    1.JavaScriptJavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。1、JavaScript代码存在形式<!--方式一--><scripttype"text/javascript"src="JS文件"></script>......
  • [技术讨论]软件/插件/库的授权许可讨论
    引入对话这里是一个对话,让我想到了一个需要讨论的问题:老迈村长11:26:29 海浪 11:20:31作为开发,是作为个人来开发一个软件,但是用到里面的一个库,这个库针对个人和公司是不一样的价格那么如果是我做的这个软件用到了这个库,提供给公司使用,那么这个lincense是公司的价格还是个人的价......
  • SQL Pretty Printer(V4.0.0)推荐插件
    SQLPrettyPrinter(V4.0.0)推荐插件安装在SQLServer中我们经常需要编写各种SQL脚本,例如存储过程和函数等,由于在编写过程中,经常会进行调整,格式很乱,可读性很差。对于有强迫症的人来说,看这样的代码非常痛苦,必须要手动对代码进行格式化,如果代码脚本比较多,这个事情也是非常费时费力的。......
  • jquery中prop()方法和attr()方法的区别
    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢?大家都知道有的浏览器只要写dis......
  • 星级评分插件
    网上看到的一个星级评分插件,觉得写的非常不错,对其原理进行分析。从代码来看最主要的是使用css样式的background-position属性background-position-20-20表示背景图向左移动20px、向上移动20pxbackground-position2020表示背景图向右移动20px、向下移动20px<!DOCTYPEhtmlPUBLI......
  • imagesLoaded插件
    imagesLoaded插件是一个在图片加载成功后才做一系列操作官方网站:https://github.com/desandro/imagesloaded/使用语法:$(selector).imagesLoaded([callback]); ImagesLoaded可以呼吁一个元素中的图像,图像直接,或两者的结合。selector选择器支持:1.直接为图片2.内嵌图片3.两......
  • struts2整合convention插件
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEstrutsPUBLIC"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.1//EN""http://struts.apache.org/dtds/struts-2.1.dtd"><struts><consta......
  • gitee github 左侧栏树形显示插件 Octotree codetree 浏览器插件
    起因看到一位仁兄用gitee做仓库https://gitee.com/zhengqingya/java-developer-document然后左侧栏挺方便(抖音视频)下载chrome扩展市场搜octotree用于githubcodetree用于gitee双核浏览器扩展市场搜octotree用于githubgitcodetree用于gitee......
  • MySQL McAfee审计插件Audit Plugin安装
     MySQLMcAfee审计插件AuditPlugin安装 官网下载:https://github.com/trellix-enterprise/mysql-audit/releases官方文档:https://github.com/trellix-enterprise/mysql-audit/wiki防爬虫:https://www.cnblogs.com/PiscesCanon/p/17324406.html  注意要对应你的数据库软......