javascript的應用，必然導致大量的javascript代碼出現(xiàn)在最終的html頁面上，帶來混亂的邏輯。一個框架性模式在javascript開發(fā)中的重要性漸漸浮現(xiàn)。
我們在使用ajax開發(fā)中，常常做這樣一件事情:在一個標簽容器中加載一些特定內容。這些內容是什么呢？無非只有兩種東西:數(shù)據(jù)與頁面樣式。
jquery.jq.mvc處理的就是這種情況。在應用jquery.jq.mvc框架之后，我們做到了把數(shù)據(jù)顯示樣式與數(shù)據(jù)本身分離開來。做業(yè)務的去關心數(shù)據(jù)去吧，做頁面的關心數(shù)據(jù)顯示去把，大家共同關心的就是xml定義出的數(shù)據(jù)了。
一個完整的應用中包括三部份的內容:工作頁面，xml數(shù)據(jù)文件和標簽容器中顯示的內容頁面。
Jquery.jq.mvc插件下載/Files/csnowfox/jquery.jq.mvc.rar
jquery.jq.mvc插件演示下載/Files/csnowfox/jquery.jq.mvc.example.rar
下面展示如何通過jquery.jq.mvc來工作。在這里，我們使用到了上一章節(jié)中定義的jquery.jq.databinding插件。加入以下文件便能看到效果。
工作頁面(首頁面，在其中整合配置xml數(shù)據(jù)文件與標簽容器中顯示的內容頁面，xml文件我們使用了靜態(tài)文件來方便舉例)-- 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">
<!-- 數(shù)據(jù)處理邏輯 -->
var userMap = {"0001":"男","0002":"女","0003":"保密"}
function changeName(val) {
return userMap[val];
}
$(function (){
$.blockUI($("#domMessage"));
$("#ajForm").formController("#content","index.htm",
function(dataMap) {
//--- 定義數(shù)據(jù)綁定 ---
$("#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> xml數(shù)據(jù)文件(可以通過程序生成)--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>
<!-- 用于數(shù)據(jù)綁定 -->
<tr id="def">
<td bindingData="name"></td>
<td bindingData="sex" bindingPattern="[function] changeName({0})"></td>
<td bindingData="number"></td>
</tr>
<!-- 下面是其它的布局輔助綁定數(shù)據(jù)后依然位于表格底部 -->
<tr>
<td colspan="2"> --- 分頁 ---</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>