jQuery Templates模板插件

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>

 注意：定义模板使用的script标签，不过type为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>