动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。
这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,但是遇到比较复杂的,其中还有些逻辑判断的如果学是像以前一样的拼接,代码可读性和可维护性都会大打折扣。
因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种。
Tmpl提供了几种常用tag:
- ${}:等同于{{=}},是输出变量,${}里面还可以放表达式 ,通过了html编码的(=和变量之间一定要有空格,否则无效)。
- {{html}}:输出变量html,但是没有html编码,适合输出html代码;
- {{if }} {{else}}:提供了分支逻辑 {{else}} 相当于else if。
- {{each}}:提供循环逻辑,$value访问迭代变量。
Tmpl提供的不常用tag:
- {{tmpl}} and {{wrap}}.
1、${}与{{=}}
先来看一个例子。
<script id="demo" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<table>
<tr>
<td>${ID}</td>
<td>{{= Name}}</td>
<td>${Number(Num)+1}</td>
<td>${Status}</td>
</tr>
</table>
</div>
</script>
<script type="text/javascript">
var users = [{ ID: 'think8848', Name: 'Joseph', Num: '1', Status: 1 }, { ID: 'aCloud', Name: 'Mary', Num: '2',Status: 2}];
$("#demo").tmpl(users).appendTo('#div_demo');
</script>
实现效果如下:
我在这个例子中同时用到了{}与{{=}}两种表达式,达到的效果是一样的。
2、{{html}}
可以直接输出html代码。
<div id="div_html"></div>
<script id="html" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${ID}</span>
<span style="margin-left:10px;">{{= Name}}</span></br>
${html}
{{html html}}
</div>
</script>
<script type="text/javascript">
var user = { ID: 'think8848', Name: 'Joseph Chan', html: '<button>html</button>' };
$("#html").tmpl(user).appendTo('#div_html');
</script>
3、{{if }} {{else}}
<div id="div_ifelse"></div>
<script id="ifelse" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${ID}</span>
<span style="margin-left:10px;">{{= Name}}</span>
{{if Status}}
<span>Status${Status}</span>
{{else App}}
<span>App${App}</span>
{{else}}
<span>None</span>
{{/if}}
</div>
</script>
<script type="text/javascript">
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');
</script>
4、{{each}}
<div id="div_each">
</div>
<script id="each" type="text/x-jquery-tmpl">
<h3>users</h3>
{{each(i,user) users}}
<div>${i+1}:{{= user.name}}</div>
{{if i==0}}
<h4>group</h4>
{{each(j,group) groups}}
<div>${group.name}</div>
{{/each}}
{{/if}}
{{/each}}
<h3>depart</h3>
{{each departs}}
<div>{{= $value.name}}</div>
{{/each}}
</script>
<script type="text/javascript">
var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
$("#each").tmpl(eachData).appendTo('#div_each');
</script>