ASP.NET團隊最近還向jQuery社區提交了被稱為“data linking”的技術,Data Linking可以幫助你實現對象與對象之間屬性的關聯——當其中一方發生改變時另一方也隨之改變。方便的實現頁面中展現的數據與實際數據對象中的數據實時同步。
data linking與data-binding的理論很相近(我們之所以使用data linking這個名稱是因為jQuery中已經包含bing()方法,盡管這個方法與數據綁定沒有什么關系...)。
現在來看看data linking該如何使用。假設有一個頁面,該頁面上有兩個<input>元素,如下所示:
然后,我們通過下面這段Javascript代碼將這兩個INPUT元素與一個叫做“contact”的Javascript對象的對應屬性關聯起來:
而且當contact對象的屬性值發生改變時,與該屬性綁定的Input元素中的值也會自動的發生改變。
這樣,我們便可以通過編程的方式,比如使用jQuery中的attr()方法來修改contact對象的屬性值,如下所示:
需要注意的是正如我們上面使用了jQuery中的attr()方法更新了contact對象的屬性值。為了確保data linking的正常工作,必須使用jQuery中的方法來對屬性值進行修改。
雙向綁定
上面實現的是Javascript對象到HTML元素單向的數據綁定,要想實現雙向的數據綁定,需使用linkBoth()方法。
比如,下面的代碼為一button元素添加了客戶端的Javascript單擊處理事件。單擊按鈕后,彈出一警告窗口,并在窗口中顯示contact對象的屬性值:
下面演示了當修改了頁面中Name輸入框內的值并點擊保存按鈕后的情況。注意到輸入框與contact對象中相應的屬性值都發生了改變:
注意上面轉換器是如何轉換綁定雙方的值并傳遞給 linkFrom() 方法的。在將Input元素中的值同步到contact對象的phone屬性中時,轉換器自動過濾掉了數字以外的其它字符。也就是說,如果你在頁面的Phone輸入框內輸入(206)555-9999,同步到contact對象的phone屬性內的值將是2065559999:
注意{{link name}}與{{link price}}這兩個表達式,它們使SPAN標簽與product對象的屬性關聯了起來。目前,jQuert模板允許用戶使用自定義的命令來對模板自帶的數據同步方法進行擴展。這里,我們就使用一個叫做“link”的方法來擴展模板默認的數據同步功能。
上面的模板使用了data linking所帶來的好處就是當“product”對象數據發生改變時頁面上的SPAN標簽顯示的內容也會自動的進行同步并顯示。聲明性的數據連接也讓我們能更方便的創建,編輯和插入表單。比如,使用聲明性的數據連接,便可以通過下面的方式來創建一個表單以編輯“product”對象。
當你采用了模板技術及data linking進行了關聯聲明之后,當你修改了頁面Input元素中的值時,與該元素相關聯的Javascript對象的屬性也會同步的發生改變。這樣就免去了我們需要手工編寫代碼來進行對象與數據顯示的同步工作的麻煩,這也有助于我們編寫出更簡潔的客戶端代碼。
新聞熱點
疑難解答
圖片精選