jQuery Data Linking 對象與對象之間屬性的關聯

來源:互聯網
上載者:User

支援用戶端的資料繫結

ASP.NET團隊最近還向jQuery社區提交了被稱為“data linking”的技術,Data Linking可以協助你實現對象與對象之間屬性的關聯——當其中一方發生改變時另一方也隨之改變。方便的實現頁面中展現的資料與實際資料對象中的資料即時同步。

data linking與data-binding的理論很相近(我們之所以使用data linking這個名稱是因為jQuery中已經包含bing()方法,儘管這個方法與資料繫結沒有什麼關係...)。

現在來看看data linking該如何使用。假設有一個頁面,該頁面上有兩個<input>元素,如下所示:

然後,我們通過下面這段Javascript代碼將這兩個INPUT元素與一個叫做“contact”的Javascript對象的對應屬性關聯起來:

當這段代碼執行時,contact對象的name屬性值將做為第一個Input元素的值。同理,屬性phone的值則會付給id為phone的第二個Input元素。這樣一來,contact對象的屬性與Input元素的映射關係也就建立起來了。

由於本例contact對象的屬性綁定到了Input元素上,當你訪問該頁面,contact屬性的值將會分別顯示在兩個文字框中:

而且當contact對象的屬性值發生改變時,與該屬性綁定的Input元素中的值也會自動的發生改變。

這樣,我們便可以通過編程的方式,比如使用jQuery中的attr()方法來修改contact對象的屬性值,如下所示:

這樣關聯的Input元素中的值也會自動的被更新(這裡我們不需要做任何工作):

需要注意的是正如我們上面使用了jQuery中的attr()方法更新了contact對象的屬性值。為了確保data linking的正常工作,必須使用jQuery中的方法來對屬性值進行修改。

雙向繫結

上面實現的是Javascript對象到HTML元素單向的資料繫結,要想實現雙向的資料繫結,需使用linkBoth()方法。

比如,下面的代碼為一button元素添加了用戶端的Javascript單擊處理事件。單擊按鈕後,彈出一警告視窗,並在視窗中顯示contact對象的屬性值:

下面示範了當修改了頁面中Name輸入框內的值並點擊儲存按鈕後的情況。注意到輸入框與contact對象中相應的屬性值都發生了改變:

上面只是一個簡單的示範,使用了Javascript警告彈窗來顯示contact對象的屬性值。試想我們也可以調用一個web-service來將對象儲存到資料庫中。這樣做的好處是,它可以使你專註於你的資料,而不用為如何保持資料與UI顯示同步而費心。

轉換器

在data linking中我們還支援一種被稱為converters(轉換器)的特性。轉換器可以輕鬆地在串連屬性的值時進行資料轉換。

假設我們希望contact對象的phone屬性的值以純數位形式輸出(不包含”—“或”()“)。在這種情況下,我們就可以通過構建轉換器來將Input元素中的值轉換成我們希望顯示的樣式:

注意上面轉換器是如何轉換綁定雙方的值並傳遞給 linkFrom() 方法的。在將Input元素中的值同步到contact對象的phone屬性中時,轉換器自動過濾掉了數字以外的其它字元。也就是說,如果你在頁面的Phone輸入框內輸入(206)555-9999,同步到contact對象的phone屬性內的值將是2065559999:

上面示範的是去除格式,當然你也可以將轉換器反過來使用。比如,定義一個電話號碼格式的字串,並將屬性的值格式化後顯示出來。

Templating與Data Linking技術的結合使用

我們希望通過採用Templating及Data Linking技術可以讓開發人員更方便的使用jQuery來開發涉及資料顯示與處理的網站項目。Templating 可以方便的將採用ajax非同步方式擷取的資料記錄以期望的方式顯示出來,Data linking則為我們解決了頁面顯示與對象屬性的資料同步及更新的問題。

目前,我們正致力於實現一個data linking技術的擴充,以使其支援聲明性的資料連線(Declarative data linking)。好讓大家在使用模板技術顯示資料時能更容易的使用data linking,以達到更好的開發體驗。

比如,我們用如下這樣一個模板來顯示一個product對象數組:

注意{{link name}}與{{link price}}這兩個運算式,它們使SPAN標籤與product對象的屬性關聯了起來。目前,jQuert模板允許使用者使用自訂的命令來對模板內建的資料同步方法進行擴充。這裡,我們就使用一個叫做“link”的方法來擴充模板預設的資料同步功能。

上面的模板使用了data linking所帶來的好處就是當“product”對象資料發生改變時頁面上的SPAN標籤顯示的內容也會自動的進行同步並顯示。聲明性的資料連線也讓我們能更方便的建立,編輯和插入表單。比如,使用聲明性的資料連線,便可以通過下面的方式來建立一個表單以編輯“product”對象。

當你採用了模板技術及data linking進行了關聯聲明之後,當你修改了頁面Input元素中的值時,與該元素相關聯的Javascript對象的屬性也會同步的發生改變。這樣就免去了我們需要手工編寫代碼來進行對象與資料顯示的同步工作的麻煩,這也有助於我們編寫出更簡潔的用戶端代碼。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。