- 我想所有處理表單程式的同仁都會覺得很無聊,顯示資料的時候要將業務對象一一綁定到表單,處理提交表單的時候要將包含在表單中的欄位一個個再綁定到業務對象。這個過程很繁瑣,而且修改的時候也不愉快。
以前表單的處理常式基本上都延著這樣的套路(這裡以C#為例,其它語言大致相同):
textBoxPersonName.Text = person.Name;
textBoxPersonBirthday.Text = person.Birthday.ToString("yyyy-MM-dd");
int index = 0;
for(int i=0; i<dtBirthplac.Rows.Count; i++){
if(dtBirthplac.Rows[i]["Code"].ToString() == person.Birthplac){
index = i;
break;
}
}
dropdownListPersonBirthplace.SelectedIndex = index;
……
或者直接在模板上處理的代碼如下(這裡以Velocity為例,其範本語言它大致相同):
<input id="PersonName" name="PersonName" value="$!person.Name" />
<input id="Birthday" name="Birthday" value="$!person.Birthday.ToString("yyyy-MM-dd")" />
#foreach($r in $dtBirthplac.Rows)
#if($r.Code == $person.Birthplac)
<option value="$r.Code" selected="selected">$r.Desc</option>
#else
<option value="$r.Code">$r.Desc</option>
#end
#end
提交表單的時候同樣繁瑣,很多時候會涉及到類型轉換,屬性比較多的時候更是無法忍受,代碼如下:
person.Name = request["Name"];
person.Birthplace = int.Parse(request["Birthplace"]);
……
- 現在
如果可以將對象的雙向繫結自動化好了(即可以從對象轉化為表單,將表單直接轉化為對象)。Javascript中對象是韌性的(flexibility),用代碼可以隨時修改對象的成員。在用戶端用js可以很容易實現欄位的綁定。用戶端部分可以採用同一的Javascritp來處理。如:
var person = {
Name: 'lisq',
Birthday:'100'
}
<form id="formPerson">
<input name="Name" />
<input name="Birthplace" />
</form>
<script>
for(p in person){
$(p).value = person[p]
}
</script>
提交表單也從傳統的form.submit()轉變為,先將表單轉為json格式(參考json的js的實現 Prototype的Form對象),然後再提交表單,綜合ajax應用,代碼如下:
<script>
var p = formPerson.serialize(true)
var paras = 'O=' + p.toJSONString()
request(url, paras, function(){
alert('儲存成功!')
})
</script>
伺服器端得到的欄位只有O,而不是從前的Name,Birthplace,O是經過轉化的字串{Name: 'lisq',Birthday:'100'},伺服器端做一個Json到C#Object的轉化,Person p = JSON.Serialize(request["O"], typeof(Person))(參考json的C#實現),如果資料訪問層有較好的實現再添加一行代碼就可以做到p.Save()(參考NHibernate)。如此這般甚好!!!
當然這樣的雙向繫結中會出現很多細節,尤其是伺服器端的json反向解析,由json格式的字串回到伺服器需要根據不同的平台語言做具體的實現。不過不管怎麼樣,這也是一種嘗試吧,希望能對以後表單程式的開發有所啟發。