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字符串的形式引入数据。

<div style="margin-top: 30px;">
			<h3>地区</h3>
			<div id="place"></div>
		</div>
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/jquery.tmpl.js"></script>
		<script type="text/tmpl" id="temp">
			<span style="margin: 0 6px;">${place}</span>
		</script>
		<script>
			var origin={
				plc:[
					{place:'上海'},
					{place:'深圳'},
					{place:'北京'},
					{place:'广州'}
				]
			};
			$('#temp').tmpl(origin.plc).appendTo('#place');
		</script>

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

<div style="margin-top: 30px;">
			<h3>地区</h3>
			<div id="place"></div>
		</div>
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/jquery.tmpl.js"></script>
		<script type="text/tmpl" id="temp">
			<span style="margin: 0 6px;">${place}</span>
		</script>
		<script>
			$.getJSON('json/place.json',function(data){
				//通过拼接字符串的形式书写
				/*var str="";
				for(var i=0;i<data.plc.length;i++){
					str+='<span style="margin: 0 6px;">'+data.plc[i].place+'</span>';
					console.log("str:"+str);
				}
				$('#place').append(str);
				*/
				//tmpl形式
				$('#temp').tmpl(data.plc).appendTo('#place');
			});
		</script>

place.json数据内容为：

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

<div class="container">
			<table border="1px" cellpadding="5" cellspacing="0" width="100%">
				<thead>
					<tr>
						<td>firstName</td>
						<td>lastName</td>
						<td>email</td>
						<td>place</td>
					</tr>
				</thead>
				<tbody id="tbody"></tbody>
			</table>
			<table border="1px" cellpadding="5" cellspacing="0" width="100%" style="margin-top: 30px;">
				<thead>
					<tr>
						<td>Name</td>
						<td>Level</td>
						<td>img</td>
					</tr>
				</thead>
				<tbody id="tbody2"></tbody>
			</table>
		</div>
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/jquery.tmpl.js"></script>
		<script type="text/tmpl"  id="temp">
			<tr>
				<td>${firstName}</td>
				<td>{{= lastName}}</td>
				<td>{{html email}}</td>
				<td>{{html place}}</td>
			</tr>
		</script>
		<script type="text/tmpl" id="temp2">
			<tr>
				<td>${name}</td>
				<td>${level}</td>
				<td><img src="${img}"/></td>
			</tr>
		</script>
		<script>
			$.getJSON("json/test.json",{},function(data){
				$('#temp').tmpl(data.programmers).appendTo('#tbody');
				$('#temp2').tmpl(data.authors).appendTo('#tbody2');
			});
		</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文件，必要时修改一下路径。