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