您的位置：首页 > Web前端 > JQuery

jQuery.template.js 简单使用

2016-08-26 16:24 393 查看

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

我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 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 的功能不仅如此，具体参考：

jquery-tmpl

jQuery .tmpl(), .template()学习

jQuery-template.js学习

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航