javascript的应用，必然导致大量的javascript代码出现在最终的html页面上，带来混乱的逻辑。一个框架性模式在javascript开发中的重要性渐渐浮现。
我们在使用ajax开发中，常常做这样一件事情:在一个标签容器中加载一些特定内容。这些内容是什么呢？无非只有两种东西:数据与页面样式。
jquery.jq.mvc处理的就是这种情况。在应用jquery.jq.mvc框架之后，我们做到了把数据显示样式与数据本身分离开来。做业务的去关心数据去吧，做页面的关心数据显示去把，大家共同关心的就是xml定义出的数据了。
一个完整的应用中包括三部份的内容:工作页面，xml数据文件和标签容器中显示的内容页面。
Jquery.jq.mvc插件下载/Files/csnowfox/jquery.jq.mvc.rar
jquery.jq.mvc插件演示下载/Files/csnowfox/jquery.jq.mvc.example.rar
下面展示如何通过jquery.jq.mvc来工作。在这里，我们使用到了上一章节中定义的jquery.jq.databinding插件。加入以下文件便能看到效果。
工作页面(首页面，在其中整合配置xml数据文件与标签容器中显示的内容页面，xml文件我们使用了静态文件来方便举例)-- jq.form.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HelloWorld</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="lib/jquery/jquery.jq.js" type="text/javascript"></script>
<script src="lib/jquery/jquery.block.js" type="text/javascript"></script>
<script src="lib/jquery/jquery.jq.mvc.js" type="text/javascript"></script>
<script src="lib/jquery/jquery.jq.form.js" type="text/javascript"></script>
<script src="lib/jquery/jquery.jq.databinding.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- 数据处理逻辑 -->
var userMap = {"0001":"男","0002":"女","0003":"保密"}
function changeName(val) {
return userMap[val];
}
$(function (){
$.blockUI($("#domMessage"));
$("#ajForm").formController("#content","index.htm",
function(dataMap) {
//--- 定义数据绑定 ---
$("#ta").bindingItemsData(dataMap,function(l,it){
$(it).hover(function(){
$(it).addClass("blue");
},function(){
$(it).removeClass("blue");
})
});
$.unblockUI();
},
function(formArray, jqForm) {
$.unblockUI();
$.blockUI("Just a moment");
},
function(){
alert("error");
$.unblockUI();
}
);
$("#cansel").click(function () {
$.unblockUI();
});
})
</script>
<style type="text/css" media="screen">
.blue { color: blue; }
</style>
</head>
<body>
<div id="head">
<h1>Jquery-JingleQ</h1>
</div>
<hr/>
<div id="content">div容器</div>
<div id="domMessage" style="display:none;">
<h1>请登陆</h1>
<form name="ajForm" action="index.xml" method="post">
<p>name:<input type="text" name="name"/></p>
<p>password:<input type="password" name="password"/></p>
<p><input type="submit" value="submit"/><input id="cansel" type="button" value="cansel"/></p>
</form>
</div>
</body>
</html>
数据文件--index.xml
<?xml version="1.0" encoding="utf-8"?>
<datas>
<item>
<property name="name">李四</property>
<property name="sex">0001</property>
<property name="number">123456</property>
</item>
<item>
<property name="name">张三</property>
<property name="sex">0003</property>
<property name="number">654321</property>
</item>
<item>
<property name="name">王二</property>
<property name="sex">0002</property>
<property name="number">654321</property>
</item>
</datas>
标签容器中显示的内容页面(也是一个htm页面)--index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HelloWorld</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="conent" style="{font-size: 12pt}">
<table border="0" cellspacing="5" cellpadding="5" id="ta">
<tbody>
<!-- 定制menu是为了使标题和下面的列表可以有不一样的样式布局 -->
<tr id="menu">
<td>用户名</td>
<td>姓名</td>
<td>员工号</td>
</tr>
<!-- 用于数据绑定 -->
<tr id="def">
<td bindingData="name"></td>
<td bindingData="sex" bindingPattern="[function] changeName({0})"></td>
<td bindingData="number"></td>
</tr>
<!-- 下面是其它的布局辅助绑定数据后依然位于表格底部 -->
<tr>
<td colspan="2"> --- 分页 ---</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
