javascript的應(yīng)用，必然導(dǎo)致大量的javascript代碼出現(xiàn)在最終的html頁(yè)面上，帶來(lái)混亂的邏輯。一個(gè)框架性模式在javascript開(kāi)發(fā)中的重要性漸漸浮現(xiàn)。
我們?cè)谑褂胊jax開(kāi)發(fā)中，常常做這樣一件事情:在一個(gè)標(biāo)簽容器中加載一些特定內(nèi)容。這些內(nèi)容是什么呢？無(wú)非只有兩種東西:數(shù)據(jù)與頁(yè)面樣式。
jquery.jq.mvc處理的就是這種情況。在應(yīng)用jquery.jq.mvc框架之后，我們做到了把數(shù)據(jù)顯示樣式與數(shù)據(jù)本身分離開(kāi)來(lái)。做業(yè)務(wù)的去關(guān)心數(shù)據(jù)去吧，做頁(yè)面的關(guān)心數(shù)據(jù)顯示去把，大家共同關(guān)心的就是xml定義出的數(shù)據(jù)了。
一個(gè)完整的應(yīng)用中包括三部份的內(nèi)容:工作頁(yè)面，xml數(shù)據(jù)文件和標(biāo)簽容器中顯示的內(nèi)容頁(yè)面。
Jquery.jq.mvc插件下載/Files/csnowfox/jquery.jq.mvc.rar
jquery.jq.mvc插件演示下載/Files/csnowfox/jquery.jq.mvc.example.rar
下面展示如何通過(guò)jquery.jq.mvc來(lái)工作。在這里，我們使用到了上一章節(jié)中定義的jquery.jq.databinding插件。加入以下文件便能看到效果。
工作頁(yè)面(首頁(yè)面，在其中整合配置xml數(shù)據(jù)文件與標(biāo)簽容器中顯示的內(nèi)容頁(yè)面，xml文件我們使用了靜態(tài)文件來(lá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>請(qǐng)登陸</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ù)文件(可以通過(guò)程序生成)--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>
標(biāo)簽容器中顯示的內(nèi)容頁(yè)面(也是一個(gè)htm頁(yè)面)--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是為了使標(biāo)題和下面的列表可以有不一樣的樣式布局 -->
<tr id="menu">
<td>用戶(hù)名</td>
<td>姓名</td>
<td>員工號(hào)</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"> --- 分頁(yè) ---</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>