动态请求数据来更新页面是现在非常常用的方法，比如博客评论的分页动态加载，微博的滚动加载和定时请求加载等。

这些情况下，动态请求返回的数据一般不是已拼好的HTML就是JSON或XML，总之不在浏览器端拼数据就在服务器端拼数据。不过，从传输量方面来看，返回HTML不划算，而在web传输方面，现在更多的是使用JSON而不是XML。

浏览器端根据JSON生成HTML有个很苦恼的地方就是，结构不复杂的时候还好，结构一复杂，就想死了，需要很小心很小心地写出几乎无法维护的JavaScript代码。

因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种，下面我们来详细介绍下jquery.tmpl的用法

下载地址：https://github.com/BorisMoore/jquery-tmpl

远程引入

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><scriptsrc="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

jquery.tmpl的几种常用标签分别有：

${},{{each}},{{if}},{{else}},{{html}}

不常用标签

{{=}},{{tmpl}}and{{wrap}}.

${}等同与{{=}}是输出变量${}里面还可以放表达式 （=和变量之间一定要有空格，否则无效）

<divid="div_demo"></div><scriptid="demo"type="text/x-jquery-tmpl"><divstyle="margin-bottom:10px;">　　<span>${ID}</span>　　<spanstyle="margin-left:10px;">{{=Name}}</span>　　<spanstyle="margin-left:10px;">${Number(Num)+1}</span>　　<spanstyle="margin-left:10px;">${Status}</span></div></script><scripttype="text/javascript">　　varusers=[{ID:'think8848',Name:'JosephChan',Num:'1',Status:1},{ID:'aCloud',Name:'MaryCheung',Num:'2'}];　　$("#demo").tmpl(users).appendTo('#div_demo');</script>

{{each}}提供循环逻辑，$value访问迭代变量 也可以自定义迭代变量(i,value)

<divid="div_each"></div><scriptid="each"type="text/x-jquery-tmpl"><h4>users</h4>{{each(i,user)users}}<div>${i+1}:{{=user.name}}</div>{{ifi==0}}<h5>group</h5>{{each(j,group)groups}}<div>${group.name}</div>{{/each}}{{/if}}{{/each}}<h4>depart</h4>{{eachdeparts}}<div>{{=$value.name}}</div>{{/each}}</script><scripttype="text/javascript">　　vareachData={users:[{name:'jerry'},{name:'john'}],groups:[{name:'mingdao'},{name:'meihua'},{name:'test'}],departs:[{name:'IT'}]};　　$("#each").tmpl(eachData).appendTo('#div_each');</script>

{{if}}{{else}}提供了分支逻辑 {{else}}相当于else if

<divid="div_ifelse"></div><scriptid="ifelse"type="text/x-jquery-tmpl"><divstyle="margin-bottom:10px;"><span>${ID}</span><spanstyle="margin-left:10px;">{{=Name}}</span>{{ifStatus}}<span>Status${Status}</span>{{elseApp}}<span>App${App}</span>{{else}}<span>None</span>{{/if}}</div></script><scripttype="text/javascript">　　varusers=[{ID:'think8848',Name:'JosephChan',Status:1,App:0},{ID:'aCloud',Name:'MaryCheung',App:1},{ID:'bMingdao',Name:'JerryJin'}];$("#ifelse").tmpl(users).appendTo('#div_ifelse');</script>

{{html}}输出变量html,但是没有html编码，适合输出html代码

<divid="div_html"></div><scriptid="html"type="text/x-jquery-tmpl"><divstyle="margin-bottom:10px;">　　　　<span>${ID}</span>　　　　<spanstyle="margin-left:10px;">{{=Name}}</span>　　${html}　　{{htmlhtml}}</div></script><scripttype="text/javascript">　　varuser={ID:'think8848',Name:'JosephChan',html:'<button>html</button>'};　$("#html").tmpl(user).appendTo('#div_html');</script>

{{tmpl}}嵌套模版

<divid="tmpl"></div><scriptid="tmpl1"type="text/x-jquery-tmpl"><divstyle="margin-bottom:10px;">　　<span>${ID}</span>　　<spanstyle="margin-left:10px;">{{tmpl($data)'#tmpl2'}}</span></div></script><scriptid="tmpl2"type="type/x-jquery-tmpl">{{eachName}}${$value}{{/each}}</script><scripttype="text/javascript">　　varusers=[{ID:'think8848',Name:['Joseph','Chan']},{ID:'aCloud',Name:['Mary','Cheung']}];$("#tmpl1").tmpl(users).appendTo('#tmpl');</script>

{{wrap}},包装器

<divid="wrapDemo"></div><scriptid="myTmpl"type="text/x-jquery-tmpl">ThefollowingwrapsandreorderssomeHTMLcontent:{{wrap"#tableWrapper"}}<h4>One</h4><div>First<b>content</b></div><h4>Two</h4><div>And<em>more</em><b>content</b>...</div>{{/wrap}}</script><scriptid="tableWrapper"type="text/x-jquery-tmpl"><tablecellspacing="0"cellpadding="3"border="1"><tbody><tr>{{each$item.html("h4",true)}}<td>${$value}</td>{{/each}}</tr><tr>{{each$item.html("div")}}<td>{{html$value}}</td>{{/each}}</tr></tbody></table></script><scripttype="text/javascript">$(function(){$('#myTmpl').tmpl().appendTo('#wrapDemo');});</script>

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

<divid="div_item_data"></div><scriptid="item_data"type="text/x-jquery-tmpl"><divstyle="margin-bottom:10px;">　　　　<span>${$data.ID}</span>　　　　<spanstyle="margin-left:10px;">${$item.getName("")}</span>　　　</div></script><scripttype="text/javascript">　　varusers=[{ID:'think8848',Name:['Joseph','Chan']},{ID:'aCloud',Name:['Mary','Cheung']}];$("#item_data").tmpl(users,{getName:function(spr){returnthis.data.Name.join(spr);}}).appendTo('#div_item_data');</script>

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