做项目时页面上有处功能是：在页面有处列表、有添加，我添加修改或删除后要刷新这个列表，首先想到的是局部刷新，但我们一般说的局部刷新就是利于ajax去后台调用数据并显示，而这里是一整个列表就比较麻烦了，刷新重新加载列表时不止要加载列表，还需把table的标签这些都得重新加载下，写在js里或后台都得写 "<table
class=\"datalist\">" 这之类的，太麻烦了
而后期要修改也不好改，于是乎就找到了jquery的tmpl插件，这个貌似还是官方在好几年已经不维护并停留在了beta版，不过还是有它的好用之处，下面源码实例说明：（有好几种用法，下面只说明本人用的感觉比较简单的一种）。
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(function () { var temp = [
{ Name: "blue", explain: "蓝色" },
{ Name: "red", explain: "红色" },
{ Name: "yellow", explain: "黄色" }
];
$("#tempTemplate").tmpl(temp).appendTo("#tempList");
})</script>
</head>
<body>
<ul id="tempList"></ul>
<script id="tempTemplate" type="text/x-jquery-tmpl">
<li>
<b>${Name}</b> (${explain}) </li>
</script>
</body>
</html>其实原理很简单，就好比把写好的标签当作模版，用模版出现的关键字去循环出里面的数据再显示出来。
我要刷新数据的话就用ajax从后台读取下数据并json格式传回即可。
插件官方下载地址：https://github.com/BorisMoore/jquery-tmpl
网友评论文明上网理性发言 已有0人参与
发表评论: