jQuery.template.js 简单使用

时间:2022-05-06 20:00:26

之前看了一篇文章《我们为什么要尝试前后端分离》,深有同感,并有了下面的评论:

我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views,有时候还会在这些 view 中写一些 c# 代码,突然有一天前端页面的样式出错了,但前端那里并没有问题,然后后端把前端叫过来,说你在我这里调吧,因为你没有后端的调试环境,然后前端就会很不爽,然后。。。你懂的!

其实理想的情况,就像你说的那样,前端写好页面,关于动态数据都用 ajax 的方式进行加载,这些动态数据在前端那里先 mock 出来,但数据的格式要有一定的规范,前端弄好这些之后,后端不能去修改这些页面,而是给前端一些数据接口,前端直接把接口替换掉 mock 就行了,如果页面出了问题,前端直接修复就行了,各司其职的工作效率会非常高。

总的来说,就是前端和后端要有一定的规范和接口,彼此不干预对方的工作内容(比如后端在前端写好的页面里面写后端代码)。

今天偶然发现了一个 jQuery 插件,可以部分解决上面的问题,就是 jQuery.template.js,我们首先定义好 html 模版,然后使用这个插件在对应的模版中填充数据。

简单示例:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery.js"></script>
<script src="jquery.tmpl.js"></script>
</head>
<body>
<div id="div_template1"></div><br />
<ul id="div_template2">
</ul>
<script id="template1" type="text/x-jquery-tmpl">
<a href="${Link}" target="_blank">${Text}</a>
</script>
<script id="template2" type="text/x-jquery-tmpl">
<li>${ID}.<span>${Name}</span></li>
</script> <script type="text/javascript">
$(function () {
var link = { Text: '蟋蟀', Link: 'http://www.cnblogs.com/xishuai/' };
var users = [{ ID: '1', Name: 'xishuai1' }, { ID: '2', Name: 'xishuai2' }]; $('#template1').tmpl(link).appendTo('#div_template1');
$('#template2').tmpl(users).appendTo('#div_template2');
});
</script>
</body>
</html>

生成的 html 代码:

<div id="div_template1"><a href="http://www.cnblogs.com/xishuai/" target="_blank">蟋蟀</a></div><br>
<ul id="div_template2">
<li>1.<span>xishuai1</span></li>
<li>2.<span>xishuai2</span></li>
</ul>

会根据 json 数据的类型,进行单个显示还是循环显示,当然,也可以在 ajax 请求数据之后进行操作:

$.get("url", function (data) {
$('#template1').tmpl(data).appendTo('#div_template1');
});

当然,jQuery.template.js 的功能不仅如此,具体参考: