Jquery模板

最新推荐文章于 2020-04-29 16:37:52 发布

清晨Feelter

最新推荐文章于 2020-04-29 16:37:52 发布

阅读量903

点赞数

分类专栏：前端文章标签： Jquery模板 Jquery.tmpl

本文链接：https://blog.csdn.net/u010558660/article/details/51740428

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>