首页 > 代码库 > jquery jtemplates.js模板渲染引擎的详细用法第二篇

jquery jtemplates.js模板渲染引擎的详细用法第二篇

2024-08-23 03:57:10   221人阅读

jquery jtemplates.js模板渲染引擎的详细用法第二篇


关于jtemplates.js的用法在第一篇中已经讲过了，这里就直接上代码，不同之处是绑定模板的方式，这里讲模板的数据专门写一个template.html的文件来展示

<span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html>

<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>jQuery - jTemplates</title>
	<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css">
	<script type="text/javascript" src="http://www.mamicode.com/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="http://www.mamicode.com/js/jquery-jtemplates.min.js"></script>
	<style type="text/css">
	.container{
		width: 1000px;
		height: 600px;
		margin: 0 auto;
	}
	table{
		background-color: #fff;
	}
	table tr th{
		padding: 8px;
		border-bottom: 1px solid #eee;
	}
	table tr td{
		padding: 10px;
		border-bottom: 1px solid #eee;
	}
	</style>
	<script type="text/javascript">
	// function formatMail(mail){
	// 	result mail.replace(/@|\./g,‘^_^‘);
	// 	// result "90";
	// }
	</script>
	<script type="text/javascript">
		
	$(function(){

		// 获取JSON数据并且赋值显示
		$.getJSON("./data/dataSource.json", function(data){
			// // 设置模板
			// $("#result").setTemplateURL("template.html");
			// // 给模板加载数据
			// $("#result").processTemplate(data);
			
			// setTemplateElement("id");  参数为页面中的一个元素ID
			// setTemplate("");  参数为具体的模板内容 $("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");
			// setTemplateURL("");  使用外部独立模板文件Url作为参数
			$("#result").setTemplateURL("template.html").processTemplate(data);
		});

	});
	</script>
</head>
<body>
	<div class="container">
		<div id="result"></div>
	</div>
</body>
</html></span>

　　模板文件如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><div><strong>部门编号：{$T.list_id}</strong></div>
<div><strong>负责人：{$T.name} </strong></div>
<div>
	<table>
		<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.replace(/@|\./g,‘^_^‘)}</td>
			<!-- <td>{formatMail($T.record.mail)}</td> -->
		</tr>
		{#/for}
         </table>
</div>
</span>

　　没错就是这样子，重点在于

<span style="font-family:Microsoft YaHei;font-size:14px;">$("#result").setTemplateURL("template.html").processTemplate(data);</span>

　　这句意思就是用id=“result”来承载结果，用template.html显示样式，processTemplate(data)用来处理数据到template.html上

 

这里的设置模板的方法有三种：

$("#result").setTemplateElement("template").processTemplate(data);

$("#result").setTemplateURL("template.html").processTemplate(data);

$("#result").setTemplate("").processTemplate(data);

 

官网原文如下：

// set templates
jQuery jQuery.fn.setTemplate(String template, [Array includes], [Object settings]);
jQuery jQuery.fn.setTemplate(Template template);
jQuery jQuery.fn.setTemplateURL(String url, [Array includes], [Object settings]);
jQuery jQuery.fn.setTemplateElement(String elementName, [Array includes], [Object settings]);

jquery jtemplates.js模板渲染引擎的详细用法第二篇


联系
我们