支持客戶端的數(shù)據(jù)綁定

ASP.NET團(tuán)隊(duì)最近還向jQuery社區(qū)提交了被稱為“data linking”的技術(shù)，Data Linking可以幫助你實(shí)現(xiàn)對(duì)象與對(duì)象之間屬性的關(guān)聯(lián)——當(dāng)其中一方發(fā)生改變時(shí)另一方也隨之改變。方便的實(shí)現(xiàn)頁(yè)面中展現(xiàn)的數(shù)據(jù)與實(shí)際數(shù)據(jù)對(duì)象中的數(shù)據(jù)實(shí)時(shí)同步。

data linking與data-binding的理論很相近（我們之所以使用data linking這個(gè)名稱是因?yàn)閖Query中已經(jīng)包含bing()方法，盡管這個(gè)方法與數(shù)據(jù)綁定沒(méi)有什么關(guān)系...）。

現(xiàn)在來(lái)看看data linking該如何使用。假設(shè)有一個(gè)頁(yè)面，該頁(yè)面上有兩個(gè)<input>元素，如下所示：

然后，我們通過(guò)下面這段Javascript代碼將這兩個(gè)INPUT元素與一個(gè)叫做“contact”的Javascript對(duì)象的對(duì)應(yīng)屬性關(guān)聯(lián)起來(lái)：

當(dāng)這段代碼執(zhí)行時(shí)，contact對(duì)象的name屬性值將做為第一個(gè)Input元素的值。同理，屬性phone的值則會(huì)付給id為phone的第二個(gè)Input元素。這樣一來(lái)，contact對(duì)象的屬性與Input元素的映射關(guān)系也就建立起來(lái)了。

由于本例contact對(duì)象的屬性綁定到了Input元素上，當(dāng)你訪問(wèn)該頁(yè)面，contact屬性的值將會(huì)分別顯示在兩個(gè)文本框中：

而且當(dāng)contact對(duì)象的屬性值發(fā)生改變時(shí)，與該屬性綁定的Input元素中的值也會(huì)自動(dòng)的發(fā)生改變。

這樣，我們便可以通過(guò)編程的方式，比如使用jQuery中的attr()方法來(lái)修改contact對(duì)象的屬性值，如下所示：

這樣關(guān)聯(lián)的Input元素中的值也會(huì)自動(dòng)的被更新（這里我們不需要做任何工作）：

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

雙向綁定

上面實(shí)現(xiàn)的是Javascript對(duì)象到HTML元素單向的數(shù)據(jù)綁定，要想實(shí)現(xiàn)雙向的數(shù)據(jù)綁定，需使用linkBoth()方法。

比如，下面的代碼為一button元素添加了客戶端的Javascript單擊處理事件。單擊按鈕后，彈出一警告窗口，并在窗口中顯示contact對(duì)象的屬性值：

下面演示了當(dāng)修改了頁(yè)面中Name輸入框內(nèi)的值并點(diǎn)擊保存按鈕后的情況。注意到輸入框與contact對(duì)象中相應(yīng)的屬性值都發(fā)生了改變：

上面只是一個(gè)簡(jiǎn)單的演示，使用了Javascript警告彈窗來(lái)顯示contact對(duì)象的屬性值。試想我們也可以調(diào)用一個(gè)web-service來(lái)將對(duì)象保存到數(shù)據(jù)庫(kù)中。這樣做的好處是，它可以使你專注于你的數(shù)據(jù)，而不用為如何保持?jǐn)?shù)據(jù)與UI顯示同步而費(fèi)心。

轉(zhuǎn)換器

在data linking中我們還支持一種被稱為converters（轉(zhuǎn)換器）的特性。轉(zhuǎn)換器可以輕松地在連接屬性的值時(shí)進(jìn)行數(shù)據(jù)轉(zhuǎn)換。

假設(shè)我們希望contact對(duì)象的phone屬性的值以純數(shù)字的形式輸出（不包含”—“或”（）“）。在這種情況下，我們就可以通過(guò)構(gòu)建轉(zhuǎn)換器來(lái)將Input元素中的值轉(zhuǎn)換成我們希望顯示的樣式：

上面演示的是去除格式，當(dāng)然你也可以將轉(zhuǎn)換器反過(guò)來(lái)使用。比如，定義一個(gè)電話號(hào)碼格式的字符串，并將屬性的值格式化后顯示出來(lái)。

Templating與Data Linking技術(shù)的結(jié)合使用

我們希望通過(guò)采用Templating及Data Linking技術(shù)可以讓開(kāi)發(fā)人員更方便的使用jQuery來(lái)開(kāi)發(fā)涉及數(shù)據(jù)顯示與處理的網(wǎng)站項(xiàng)目。Templating 可以方便的將采用ajax異步方式獲取的數(shù)據(jù)記錄以期望的方式顯示出來(lái)，Data linking則為我們解決了頁(yè)面顯示與對(duì)象屬性的數(shù)據(jù)同步及更新的問(wèn)題。

目前，我們正致力于實(shí)現(xiàn)一個(gè)data linking技術(shù)的擴(kuò)展，以使其支持聲明性的數(shù)據(jù)連接（Declarative data linking）。好讓大家在使用模板技術(shù)顯示數(shù)據(jù)時(shí)能更容易的使用data linking，以達(dá)到更好的開(kāi)發(fā)體驗(yàn)。

比如，我們用如下這樣一個(gè)模板來(lái)顯示一個(gè)product對(duì)象數(shù)組：

注意{{link name}}與{{link price}}這兩個(gè)表達(dá)式，它們使SPAN標(biāo)簽與product對(duì)象的屬性關(guān)聯(lián)了起來(lái)。目前，jQuert模板允許用戶使用自定義的命令來(lái)對(duì)模板自帶的數(shù)據(jù)同步方法進(jìn)行擴(kuò)展。這里，我們就使用一個(gè)叫做“l(fā)ink”的方法來(lái)擴(kuò)展模板默認(rèn)的數(shù)據(jù)同步功能。

上面的模板使用了data linking所帶來(lái)的好處就是當(dāng)“product”對(duì)象數(shù)據(jù)發(fā)生改變時(shí)頁(yè)面上的SPAN標(biāo)簽顯示的內(nèi)容也會(huì)自動(dòng)的進(jìn)行同步并顯示。聲明性的數(shù)據(jù)連接也讓我們能更方便的創(chuàng)建，編輯和插入表單。比如，使用聲明性的數(shù)據(jù)連接，便可以通過(guò)下面的方式來(lái)創(chuàng)建一個(gè)表單以編輯“product”對(duì)象。

當(dāng)你采用了模板技術(shù)及data linking進(jìn)行了關(guān)聯(lián)聲明之后，當(dāng)你修改了頁(yè)面Input元素中的值時(shí)，與該元素相關(guān)聯(lián)的Javascript對(duì)象的屬性也會(huì)同步的發(fā)生改變。這樣就免去了我們需要手工編寫代碼來(lái)進(jìn)行對(duì)象與數(shù)據(jù)顯示的同步工作的麻煩，這也有助于我們編寫出更簡(jiǎn)潔的客戶端代碼。

最新評(píng)論