Jquery模板

Jquery 模板

jQuery .tmpl()的使用

$.ajax({
	url:url
	type:"get",
	dataType:"json",
	success:function(data){
		if(data.rc == 0){		        
		    var site = "";
			$(data.website).each(function(i, site){
				site += "<tr>" 
					  + "<td>" + site.url +  "</td>" 
					  + "<td>" + site.name + "</td>" 
					  + "<td>" + site.tags + "</td>"  
					  + "</tr>";
			});		
			$("#rows").append(site);					
		}
	}
});

json请求返回数据后,好多时候拼字符串(尤其是返回list),然后append到dom;
这样比较灵活,但不够讲究,
下面Jquery Tmplate方式,比较干净利索

Tmpl提供了几种tag:
${}:等同于{{=}},是输出变量,通过了html编码的。
{{html}}:输出变量html,但是没有html编码,适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑,$value访问迭代变量。

<!DOCTYPE html>
<html>
	<head>
		<title>jquery-tmpl</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="jquery.js" type="text/javascript"></script>
		<script src="jquery.tmpl.min.js" type="text/javascript"></script>
		<script>
			$(function () { 
				var website = [{ url: 'www.aaa.com', name: 'aaa', tags: ['java', 'html'] }, 
					{ url: 'www.bbb.com', name: 'bbb', tags: ['kafka', 'zookeeper']}]; 
				//$('#myTemplate').tmpl(website).appendTo('#rows'); 
				//$('#myTemplate1').tmpl(website).appendTo('#rows'); 
				var data = new Object();
				data.website = website;
				$('#myTemplate2').tmpl(data).appendTo('#rows'); 
				//$('#myTemplate').tmpl(website, {
				//	getTags: function (separator) {
				//		return this.data.tags.join(separator);
				//	}
				//}).appendTo('#rows');
			}); 
		</script>
		<script id="myTemplate" type="text/x-jquery-tmpl"> 
			<tr>
				<td>${$data.url}</td>
				<td>${$data.name}</td>
				<!--<td>${$item.getTags(';')}</td>-->
				<td>${$data.tags}</td>
			</tr> 
		</script> 
		<script id="myTemplate1" type="text/x-jquery-tmpl"> 
			<tr>
				<td>${url}</td>
				<td>${name}</td>
				<td>${tags}</td>
			</tr> 
		</script> 
		<script id="myTemplate2" type="text/x-jquery-tmpl"> 
			{{each(i, site)	website}}
				<tr>
					<td>${site.url}</td>
					<td>${site.name}</td>
					<td>${site.tags}</td>
				</tr> 
			{{/each}}	
		</script>
	</head>
	<body>
		<table cellspacing="0" cellpadding="3" border="1"> 
			<tbody id="rows"> 
			</tbody> 
		</table> 
	</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值