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

这样就可以将markup中定义的模板应用于templateRows对象。
jQuery .tmpl()的标签，表达式，属性：
${}:从前面的例子来看，这个标签的作用很明显了，相当于是占位符，但是它还有另一种写法{{= field}}如:

复制代码 代码如下:

<script type="text/x-jquery-tmpl">
<tr><td>{{= ID}}</td><td>{{= Name}}</td></tr>
</script>

必须要注意的是，"="号后必须跟一个空格，不然是没有效果的。
另外，${}中还可以放表达式，这个牛x吧，如:
Html

复制代码 代码如下:

<table cellspacing="0" cellpadding="3">
<tbody>
</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()有两个比较有用的属性:$item、$data:

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

Html

复制代码 代码如下:

<table cellspacing="0" cellpadding="3">
<tbody>
</tbody>
</table>

Javascript

复制代码 代码如下:

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

 

效果:

 

 

{{each}}这个标签一看就知道是做循环用的了，用法如下：

Html

复制代码 代码如下:

<ul>
</ul>

Javascript

复制代码 代码如下:

<script 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');
});

 

效果:

 

 

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

Javascript

 

 

 

 

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

 

 

 

 

作用和前一种是一样的。

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

Javascript

 

 

 

 

<script id="ifelse" type="text/x-jquery-tmpl">

 

 

<tr><td>${ID}</td><td>${Name}</td><td>{{if Langs.length > 1}}${Langs.join('; ')}{{else}}${Langs}{{/if}}</td></tr>

 

 

</script>

 

 

 

 

如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果:

 

 

{{html}}，直接将对象属性值作为HTML代码替换占位符：

Javascript

 

 

 

 

<script id="html" type="text/x-jquery-tmpl">

 

 

<tr><td>${ID}</td><td>${Name}</td><td>{{html Ctrl}}</td></tr>

 

 

</script>

 

 

<script type="text/javascript">

 

 

$(function () {

 

 

var ctrls = [{ ID: 'think8848', Name: 'Joseph Chan', Ctrl: '<input type="button" value="Demo" />' }, { ID: 'aCloud', Name: 'Mary Cheung', Ctrl: '<input type="text" value="Demo" />'}];

 

 

$('#html').tmpl(ctrls).appendTo('#htmlRows');

 

 

});

 

 

</script>

 

 

 

 

效果:

 

 

{{tmpl}}，前面已经提过该标签了，这里再给一个使用参数的例子:

Javascript

 

 

 

 

<script id="tmpl1" type="text/x-jquery-tmpl">

 

 

<tr><td>${ID}</td><td>${Name}</td><td> {{tmpl($data) '#tmpl2'}}</td></tr>

 

 

</script>

 

 

<script id="tmpl2" type="type/x-jquery-tmpl">

 

 

{{each Langs}}${$value} {{/each}}

 

 

</script>

 

 

<script type="text/javascript">

 

 

$(function () {

 

 

var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}];

 

 

$('#tmpl1').tmpl(userLangs).appendTo('#tmplRows');

 

 

});

 

 

</script>

 

 

 

 

效果:

 

 

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

Html

 

 

 

 

<div id="wrapDemo">

 

 

</div>

 

 

 

 

Javascript

 

 

 

 

<script id="myTmpl" type="text/x-jquery-tmpl">

 

 

The following wraps and reorders some HTML content:

 

 

{{wrap "#tableWrapper"}}

 

 

<h3>One</h3>

 

 

<div>

 

 

First <b>content</b>

 

 

</div>

 

 

<h3>Two</h3>

 

 

<div>

 

 

And <em>more</em> <b>content</b>...

 

 

</div>

 

 

{{/wrap}}

 

 

</script>

 

 

<script id="tableWrapper" type="text/x-jquery-tmpl">

 

 

<table cellspacing="0" cellpadding="3" border="1"><tbody>

 

 

<tr>

 

 

{{each $item.html("h3", true)}}

 

 

<td>

 

 

${$value}

 

 

</td>

 

 

{{/each}}

 

 

</tr>

 

 

<tr>

 

 

{{each $item.html("div")}}

 

 

<td>

 

 

{{html $value}}

 

 

</td>

 

 

{{/each}}

 

 

</tr>

 

 

</tbody></table>

 

 

</script>

 

 

<script type="text/javascript">

 

 

$(function () {

 

 

$('#myTmpl').tmpl().appendTo('#wrapDemo');

 

 

});

 

 

</script>

 

 

 

 

效果:

 

 

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

 

 

 

 

$('tbody').delegate('tr', 'click', function () {

 

 

var item = $.tmplItem(this);

 

 

alert(item.data.Name);

 

 

});