Jquery tmpl的使用

jquery tmpl简介：动态请求数据更新页面非常常用的方法，例如博客评论的分页动态加载，微博的滚动加载和定时请求加载以及ajax请求返回数据等。

这些情况下，动态请求返回的数据一般不是已拼好的html就是JSON或XML，总之不在浏览器端拼接数据就在服务器端拼接数据。

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

因此，一些用模板生成HTML的框架相继出现jquery.tmpl就是其中一种，下面讲一下jquery.tmpl的使用语法，可分为三大类：

1、显示类
{{html}}/{{= }}/${}，这三个标签多能够将数据输出到模板中，但是{{html}}不会对数据进行编码，用于输出数据中的HTML代码段，
而{{=}}和${}怎会对数据进行编码，防止数据对于模板结构的破坏。
2、条件判断及循环
{{if}}/{{else}}/{{/if}}/{{each}}请注意是没有for/while/switch的，相对来说jquery Tmpl只支持
较为简单的逻辑判断，当然如果你感觉这些满足不了你的需求的话，可以自己写函数然后调用。
3、复用类
{{tmpl}}当分支模板过长（写在一个模板中较为轮乱）或者使用已经写好的通用模板，{{temp}}的作用就是
调用指定ID模板来显示数据。

下面具体写个例子表现一下：

例1：通过直接写json字符串的形式引入数据。

[html]  view plain  copy

1. <div style="margin-top: 30px;">  
2.             <h3>地区</h3>  
3.             <div id="place"></div>  
4.         </div>  
5.         <script src="js/jquery-1.11.1.min.js"></script>  
6.         <script src="js/jquery.tmpl.js"></script>  
7.         <script type="text/tmpl" id="temp">  
8.             <span style="margin: 0 6px;">${place}</span>  
9.         </script>  
10.         <script>  
11.             var origin={  
12.                 plc:[  
13.                     {place:'上海'},  
14.                     {place:'深圳'},  
15.                     {place:'北京'},  
16.                     {place:'广州'}  
17.                 ]  
18.             };  
19.             $('#temp').tmpl(origin.plc).appendTo('#place');  
20.         </script>  

例2：通过getJSON引入json数据。

[html]  view plain  copy

1. <div style="margin-top: 30px;">  
2.             <h3>地区</h3>  
3.             <div id="place"></div>  
4.         </div>  
5.         <script src="js/jquery-1.11.1.min.js"></script>  
6.         <script src="js/jquery.tmpl.js"></script>  
7.         <script type="text/tmpl" id="temp">  
8.             <span style="margin: 0 6px;">${place}</span>  
9.         </script>  
10.         <script>  
11.             $.getJSON('json/place.json',function(data){  
12.                 //通过拼接字符串的形式书写  
13.                 /*var str="";  
14.                 for(var i=0;i<data.plc.length;i++){  
15.                     str+='<span style="margin: 0 6px;">'+data.plc[i].place+'</span>';  
16.                     console.log("str:"+str);  
17.                 }  
18.                 $('#place').append(str);  
19.                 */  
20.                 //tmpl形式  
21.                 $('#temp').tmpl(data.plc).appendTo('#place');  
22.             });  
23.         </script>  

place.json数据内容为：

{
"plc":[
{"place":"上海"},
{"place":"深圳"},
{"place":"北京"},
{"place":"广州"}
]
}
例3：读取多个参数信息。

[html]  view plain  copy

1. <div class="container">  
2.             <table border="1px" cellpadding="5" cellspacing="0" width="100%">  
3.                 <thead>  
4.                     <tr>  
5.                         <td>firstName</td>  
6.                         <td>lastName</td>  
7.                         <td>email</td>  
8.                         <td>place</td>  
9.                     </tr>  
10.                 </thead>  
11.                 <tbody id="tbody"></tbody>  
12.             </table>  
13.             <table border="1px" cellpadding="5" cellspacing="0" width="100%" style="margin-top: 30px;">  
14.                 <thead>  
15.                     <tr>  
16.                         <td>Name</td>  
17.                         <td>Level</td>  
18.                         <td>img</td>  
19.                     </tr>  
20.                 </thead>  
21.                 <tbody id="tbody2"></tbody>  
22.             </table>  
23.         </div>  
24.         <script src="js/jquery-1.11.1.min.js"></script>  
25.         <script src="js/jquery.tmpl.js"></script>  
26.         <script type="text/tmpl"  id="temp">  
27.             <tr>  
28.                 <td>${firstName}</td>  
29.                 <td>{{= lastName}}</td>  
30.                 <td>{{html email}}</td>  
31.                 <td>{{html place}}</td>  
32.             </tr>  
33.         </script>  
34.         <script type="text/tmpl" id="temp2">  
35.             <tr>  
36.                 <td>${name}</td>  
37.                 <td>${level}</td>  
38.                 <td><img src="${img}"/></td>  
39.             </tr>  
40.         </script>  
41.         <script>  
42.             $.getJSON("json/test.json",{},function(data){  
43.                 $('#temp').tmpl(data.programmers).appendTo('#tbody');  
44.                 $('#temp2').tmpl(data.authors).appendTo('#tbody2');  
45.             });  
46.         </script>  

test.json数据内容为：

{
"programmers":[
{"firstName":"Lucy","lastName":"zhao","email":"123456","place":"上海"},
{"firstName":"Tizzy T","lastName":"wang","email":"123","place":"北京"}
],
"authors":[
{"name":"Any","level":"one","img":"./img/foot_21.png"},
{"name":"cool","level":"two","img":"img/foot_31.png"},
{"name":"Luck","level":"three","img":"img/foot_41.png"}
],
"origin":[
{"place":"上海"},
{"place":"深圳"},
{"place":"北京"},
{"place":"广州"}
]
}

注意：页面中引入有jquery和jquery.tmpl文件，必要时修改一下路径。