【jQuery】利用jTemplates实现兼容IE6的jQuery模板化

最新推荐文章于 2021-06-03 06:46:54 发布

yongh701

最新推荐文章于 2021-06-03 06:46:54 发布

阅读量998

点赞数

分类专栏： jQuery 文章标签： jquery jtemplates ie 6 模板化前端

本文链接：https://blog.csdn.net/yongh701/article/details/78365851

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文和《【JavaScript】兼容IE6的JS模板化》（点击打开链接）是姊妹篇，鉴于现在javascript已经开始不受待见，甚至已经开始被当作后端语言，被事做extJS,NodeJs等，前端基本上都用jQuery实现的趋势，因此也就有了本文。毕竟javascript取个变量，document.getElementById实在是太长和被人诟病了！

同样是现实前端模板化，告别用前端语言写Ajax处理json数据与样式的杂糅！

一、jTemplates的下载、安装、配置

1、同样，配置这些前端组件没什么好说，说白了其实就是下载一个js文件而已。打开jTemplates的官网：http://jtemplates.tpython.com/，一个极其朴素，但实用打开迅速的网站。选择Download，然后下载一个压缩版。

2、然后放到你的网站目录，同时放一个不算太旧的jQuery，我这里选用了国内最常用的jQuery-1.8.3。

3、然后你写如下的HTML代码

<!DOCTYPE html>
<html>
	<head>
		<title>jTemplates</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script src="jquery-jtemplates.js"></script>
	</head>
	<body>
		<div id="result"></div>
		<script type="text/javascript">
 				$("#result").setTemplate("Template by {$T.bold()} version <em>{Template.version}</em>.");
 				$("#result").processTemplate("jTemplates");
		</script>
	</body>	
</html>

当你看到浏览器现实当前jTemplates版本则证明配置成功了。

这里唯一注意，jquery-1.8.3.min.js的引用必须在jquery-jtemplates.js之前，jQuery组件都这样的，老生常谈了。

二、jTemplates的使用

1、顺序结构

具体看如下代码。

<!DOCTYPE html>
<html>
	<head>
		<title>jTemplates</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script src="jquery-jtemplates.js"></script>
	</head>
	<body>
		<div id="result"><!--指明要被模板化的段落，给一个id-->
			<textarea id="template" style="display:none">
				<h1>姓名：{$T.name}，年龄：{$T.age}</h1>
			</textarea>
		</div>
	</body>
	<script>
		var data = { 
			name: "Anne", 
			age: "20" 
		};//所有数据写在一个json里面
		$("#result").setTemplateElement("template").processTemplate(data);
		//template指上面要实现模板化的id，这里的data就是上面存放模板化数据的json变量名
	</script>
</html>

运行结果如下：

这里jTemplates要求将所有需要渲染版本的数据，写在一个json数组里面。说白了，你要摆上的数据id="template"，就放在一个data里面，再用一句特定的代码渲染就行了。

可以看到对比起template.js，代码进一步简单明了。

2、条件结构

具体看如下代码：

<!DOCTYPE html>
<html>
	<head>
		<title>jTemplates</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script src="jquery-jtemplates.js"></script>
	</head>
	<body>
		<div id="result">
			<textarea id="template" style="display:none">
				<h1>
					{#if $T.a<0}
						a不是正数
					{#/if}
				</h1>			
				<h1>
					{#if $T.a>0}
						a是正数
					{#else}
						a不是正数
					{#/if}
				</h1>
				<h2>
					{#if $T.a>2}
						a大于2
					{#elseif $T.a==2}
						a等于
					{#elseif $T.a<2}
						a少于2
					{#/if}
				</h2>
			</textarea>
		</div>
	</body>
	<script>
		var data = { 
			a: -2
		};
		$("#result").setTemplateElement("template").processTemplate(data);
	</script>
</html>

运行结果如下：

可以看到jTemplates提供了如同编程语言的if~else条件判断，不过还是和template.js的建议，你有什么判断，建议在script判断完，甚至在你的后台编程语言java ee、php等判断完，再往上摆了。毕竟.html最好只有样式实现的片段。

3、循环结构

jTemplates的循环结构有点让人诟病，对于最常用的Ajax返回的json数组现实，他只提供了foreach结构，他提供的for结构，我试了很多次，貌似对json数组无效，当然，其代码简化也是明显的。如下代码，则是最基本的，用foreach结构，将json数组在网页打印一个表格。

<!DOCTYPE html>
<html>
	<head>
		<title>jTemplates</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script src="jquery-jtemplates.js"></script>
	</head>
	<body>
		<div id="result">
			<textarea id="template" style="display:none">
				<b>{$T.name}foreach形式</b>
				<table border="2">
					<tr>
						<th>编号</th><th>姓名</th><th>年龄</th><th>邮箱</th>
					</tr>
					{#foreach $T.table as record}
					<tr>
						<td>{$T.record.id}</td><td>{$T.record.name}</td><td>{$T.record.age}</td><td>{$T.record.mail}</td>
					</tr>
					{#/for}
				</table>
			</textarea>
		</div>
	</body>
	<script>
		var data = {
			name: '用户信息表',
			table: [
				{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
				{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
				{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
				{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
				{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
			]
		};
		$("#result").setTemplateElement("template").processTemplate(data);
	</script>
</html>

运行结果如下：

foreach可以和方便地，一次性将整个json数据打印出来，但问题来了，如果我需要条件，比如上面的表格我要打印成每行颜色交替之类的，如下图所示：

当然你肯定以为我接下要像官网利用它的#cycle这个或许只有开发者自己才能看得懂的任性命令了。其实大可不用像官网那样整，大家注意到，jTemplates在实现循环结构最大的问题就是要个table整一个游标，这里是record，才能很好的打印。因为在for结构，无法给这些json数组指定游标，所以也就是读不出来，因此上面才说在jTemplates打印这些json数组，必须用foreach结构来打印。然而，注意到，正如我在2、条件结构所提到的一样，jTemplates的条件结构很发达，因此上面的效果，可以写成如下的HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<title>jTemplates</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script src="jquery-jtemplates.js"></script>
	</head>
	<body>
		<div id="result">
			<textarea id="template" style="display:none">
				<b>{$T.name}</b>
				<table border="2">
					<tr>
						<th>编号</th><th>姓名</th><th>年龄</th><th>邮箱</th>
					</tr>
					{#foreach $T.table as record}
					{#if $T.record.id%2!=0}
					<tr bgcolor='#ffff00'>
					{#else}
					<tr bgcolor='#ffffff'>
					{#/if}
						<td>{$T.record.id}</td><td>{$T.record.name}</td><td>{$T.record.age}</td><td>{$T.record.mail}</td>						
					</tr>
					{#/for}
				</table>
			</textarea>
		</div>
	</body>
	<script>
		var data = {
			name: '用户信息表',
			table: [
				{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
				{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
				{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
				{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
				{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
			]
		};
		$("#result").setTemplateElement("template");    
		$("#result").processTemplate(data);
	</script>
</html>

个人认为，单纯的foreach和if配合，这个在绝大多数编程语言都by都works的组合，比官网提供的#cycle标签好看多了。毕竟编程原理明确指出编程基本结构就三种，顺序、条件、循环。

yongh701

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】利用jTemplates实现兼容IE6的jQuery模板化

本文和《【JavaScript】兼容IE6的JS模板化》（点击打开链接）是姊妹篇，鉴于现在javascript已经开始不受待见，甚至已经开始被当作后端语言，被事做extJS,NodeJs等，前端基本上都用jQuery实现的趋势，因此也就有了本文。毕竟javascript取个变量，document.getElementById实在是太长和被人诟病了！同样是现实前端模板化，告别用前端语言写Ajax
复制链接

扫一扫