var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
$("#each").tmpl(eachData).appendTo('#div_each');
{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if
${ID}{{= Name}}
{{if Status}}
Status${Status}
{{else App}}
App${App}
{{else}}
None
{{/if}}
var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
$("#ifelse").tmpl(users).appendTo('#div_ifelse');
{{html}} 输出变量html,但是没有html编码，适合输出html代码
${ID}
{{= Name}}
${html}
{{html html}}
var user = { ID: 'think8848', Name: 'Joseph Chan', html: '' };
$("#html").tmpl(user).appendTo('#div_html');
{{tmpl}} 嵌套模版
${ID}
{{tmpl($data) '#tmpl2'}}
{{each Name}}${$value} {{/each}}
var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
$("#tmpl1").tmpl(users).appendTo('#tmpl');
{{wrap}},包装器
The following wraps and reorders some HTML content:
{{wrap "#tableWrapper"}}
One
First content
Two
And more content...
{{/wrap}}
{{each $item.html("h4", true)}}
|
${$value}
|
{{/each}}
{{each $item.html("div")}}
|
{{html $value}}
|
{{/each}}
$(function () {
$('#myTmpl').tmpl().appendTo('#wrapDemo');
});
$data $item $item代表当前的模板；$data代表当前的数据。
${$data.ID}
${$item.getName(" ")}
var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
$("#item_data").tmpl(users,
{
getName: function (spr) {
return this.data.Name.join(spr);
}
}).appendTo('#div_item_data');
$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item
当前文章：jquery.tmpl.min.js--前端实现模版--数据绑定
文章起源：http://bjjierui.cn/article/jogsoc.html
