Atlas編程揭密之?dāng)?shù)據(jù)綁定

2019-11-17 04:46:58

字體：大中小

供稿：網(wǎng)友

　　Atlas架構(gòu)提供了一種比 asp.net中數(shù)據(jù)綁定（data binding）強(qiáng)大得多的客戶端綁定模型。這種模型異常靈活，甚至有些類似WPF（Windows PResentation Foundation）中的綁定模型。Atlas提供的綁定模型答應(yīng)您將某對(duì)象的任意一個(gè)屬性綁定到另外一個(gè)對(duì)象的任意一個(gè)屬性上。它不單單可以應(yīng)用于數(shù)據(jù)綁定，甚至可以將某個(gè)控件的樣式綁定到另外一個(gè)控件上。這樣使得在Atlas中將一切關(guān)聯(lián)起來變成可能。

　　在本文中，我將嘗試分析一些Atlas實(shí)現(xiàn)代碼來解釋Atlas是如何完成Binding的。

　　首先讓我們察看一小段應(yīng)用Atlas Binding的代碼。這里將一個(gè)textbox的text屬性和一個(gè)select list的selectedValue屬性綁定起來。無論你改變其中的哪個(gè)，在另一個(gè)上面都會(huì)有馬上得到體現(xiàn)。

　　Html和ASPX，定義textbox和select list。（注重必須聲明一個(gè)ScriptManager服務(wù)器端對(duì)象，以引入Atlas必須的javascript文件。）

Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖一）

<atlas:ScriptManagerID="ScriptManager1"runat="server"/>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二）

<div>

Inputanintegerfrom1to5.<br/>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖四）

<inputid="myTextBox"type="text"/><br/>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖五）

Selectanitem.<br/>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖六）

<selectid="mySelect">
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖七）

<optionvalue="1">value1</option>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖八）

<optionvalue="2">value2</option>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖九）

<optionvalue="3">value3</option>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十）

<optionvalue="4">value4</option>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十）

<optionvalue="5">value5</option>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十二）

</select>

</div>

　　Atlas腳本，將上面兩個(gè)HTML控件“升級(jí)”成Atlas控件。

Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十四）

<pagexmlns:script="http://schemas.microsoft.com/xml-script/2005">
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十五）

<references>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十六）

</references>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十七）

<components>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十八）

<textBoxid="myTextBox">
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖十九）

<bindings>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二十）

<bindingdataContext="mySelect"dataPath="selectedValue"property="text"direction="InOut"/>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二十）

</bindings>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二十二）

</textBox>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二十三）

<selectid="mySelect"/>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二十四）

</components>
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二十五）

</page>

　　如上所示，我們只需要書寫一小段簡單的代碼即可實(shí)現(xiàn)需要的綁定功能。

　　Atlas是如何實(shí)現(xiàn)這些的呢？首先，Atlas需要有一種途徑來監(jiān)聽綁定控件的綁定屬性的變化（除非你不需要Atlas提供的自動(dòng)綁定功能）。在Atlas.js中定義了一個(gè)名為Sys.INotifyPropertyChanged的接口，類似.NET中提供的一樣。對(duì)象可以實(shí)現(xiàn)這個(gè)接口以期讓別的對(duì)象監(jiān)聽到自己的屬性值的變化。Atlas中所有組件的基類，Sys.Component，實(shí)現(xiàn)了這個(gè)接口。Sys.Component同樣提供一個(gè)方法raisePropertyChanged(propertyName)，這個(gè)方法應(yīng)該在每個(gè)屬性的setter中被調(diào)用以發(fā)出INotifyPropertyChanged.propertyChanged事件。

　　目前為止，我們可以看一下Atlas控件中textbox的具體實(shí)現(xiàn)。看看textbox中是如何在相應(yīng)的HTML事件發(fā)出時(shí)同樣發(fā)出propertyChanged事件的。

Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二十六）

var_text;

var_changeHandler;
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖二十八）

this.get_text=function() Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖三十）

{

returnthis.element.value;
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖三十三）

}

this.set_text=function(value) Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖三十七）

{

if(this.element.value!=value) Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖四十）

{

this.element.value=value;
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖四十二）

this.raisePropertyChanged('text');
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖四十三）

}

}

this.initialize=function() Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖四十八）

{

Sys.UI.TextBox.callBaseMethod(this,'initialize');
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖五十）

_text=this.element.value;
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖五十二）

_changeHandler=Function.createDelegate(this,this._onChanged);
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖五十四）

this.element.attachEvent('onchange',_changeHandler);
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖五十五）

_keyPressHandler=Function.createDelegate(this,this._onKeyPress);
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖五十七）

this.element.attachEvent('onkeypress',_keyPressHandler);
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖五十八）

}

this._onChanged=function() Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖六十二）

{

if(this.element.value!=_text) Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖六十五）

{

_text=this.element.value;
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖六十七）

this.raisePropertyChanged('text');
Atlas編程揭密之?dāng)?shù)據(jù)綁定（圖六十八）

}

}

　　可以看到，當(dāng)text屬性改變時(shí)，Atlas發(fā)出了propertyChanged事件，這就使綁定到這個(gè)屬性成為可能。

　　而后Atlas的綁定模型捕捉到了這個(gè)事件，再根據(jù)binding聲明查找出與其相關(guān)的目的對(duì)象以及相應(yīng)的屬性，并調(diào)用這個(gè)屬性的Setter來實(shí)現(xiàn)目的對(duì)象屬性的變化。

　　假如源對(duì)象（source object）實(shí)現(xiàn)了INotifyPropertyChanged接口，并且改變的屬性就是dataPath 中指定的屬性，同時(shí)direction 設(shè)定為In或者InOut，Atlas綁定將通過分析引入（incoming）的binding來處理propertyChanged事件（參考下面將要介紹的evaluateIn()方法）。

　　類似的，假如目的對(duì)象（target object）實(shí)現(xiàn)了INotifyPropertyChanged接口，并且改變的屬性就是property中指定的屬性，同時(shí)direction 設(shè)定為Out或者InOut，Atlas綁定將通過分析流出（outgoing）的binding來處理propertyChanged事件（參考下面將要介紹的evaluateOut()方法）。

　　接下來讓我們察看binding實(shí)現(xiàn)代碼中的的公有方法和屬性來分析一下Atlas綁定的核心實(shí)現(xiàn)。在這里沒有必要列出涉及綁定的全部代碼，假如您感愛好，可以用要害詞Sys.BindingBase和Sys.Binding 在Atlas.js文件中進(jìn)行搜索。首先是Sys.BindingBase提供的方法和屬性。

屬性automatic：指定當(dāng)源對(duì)象的相應(yīng)屬性變化時(shí)（對(duì)于In和InOut），或者目的對(duì)象的相應(yīng)屬性變化時(shí)（對(duì)于Out和InOut），綁定是否將被自動(dòng)執(zhí)行。這個(gè)屬性默認(rèn)會(huì)被置為true。當(dāng)然假如你需要完全控制綁定的開始時(shí)機(jī)時(shí)也可以設(shè)定為false。例如，某些情況下你決定在一個(gè)Ajax請(qǐng)求成功返回的時(shí)候才開始綁定數(shù)據(jù)源與顯示控件，以確保顯示控件真正綁定到了一些數(shù)據(jù)，這時(shí)你需要顯示的調(diào)用binding的evaluate()方法以開始綁定。

屬性dataContext：指定擁有待綁定屬性的對(duì)象。假如不指定的話，Atlas binding將調(diào)用包含它的父控件的dataContext屬性代替。控件可以通過返回設(shè)定的dataContext或是按照默認(rèn)返回其父控件的dataContext來實(shí)現(xiàn)這個(gè)屬性。例如，某個(gè)ListView控件可以在其創(chuàng)建ListView Item時(shí)設(shè)定它的dataContext為一個(gè)DataRow對(duì)象，以實(shí)現(xiàn)綁定。

屬性dataPath：指定需要綁定的源對(duì)象的屬性。Atlas binding還答應(yīng)綁定一個(gè)嵌套的屬性，類似：sourceObjectProperty.nestedProperty.nestedNestedProperty。源代碼中可以看出Atlas能自動(dòng)為你轉(zhuǎn)化并運(yùn)行這些代碼。dataPath屬性的默認(rèn)值為空，也就是Atlas會(huì)綁定這個(gè)對(duì)象本身。

屬性property：指定需要綁定的目標(biāo)對(duì)象的屬性。你應(yīng)該總是指定這個(gè)屬性，否則這個(gè)綁定就沒有任何意義。

屬性propertyKey：有時(shí)候我們可能需要綁定到某個(gè)對(duì)象的嵌套屬性上。比如，假如需要綁定到style的屬性color，我們可以指定property屬性為style，并指定propertyKey屬性為color。

屬性transformerArgument：傳遞給Atlas transformer的參數(shù)，只有設(shè)定transform時(shí)才會(huì)用到。

事件transform：這個(gè)事件答應(yīng)在綁定時(shí)指定一個(gè)transformer。當(dāng)你需要在綁定的時(shí)候?qū)?shù)據(jù)做以處理時(shí)，transformer將會(huì)是個(gè)很好的選擇。例如，假如你希望顯示一個(gè)布爾值為Yes/No而不是默認(rèn)的true/false，那么就應(yīng)該使用一個(gè)自定義的transformer。Atlas同時(shí)提供了一些內(nèi)建的transformer，例如Add，Multiply以及Compare等。

方法evaluateIn：處理引入的binding。假如direction屬性設(shè)置成為In或者InOut，該方法將取得源對(duì)象的屬性的值（根據(jù)binding中設(shè)定的dataContext以及dataPath屬性），并調(diào)用目標(biāo)對(duì)象相應(yīng)屬性的Setter。這也就是Atlas中實(shí)現(xiàn)binding的核心部分。
Sys.Binding（也在Atlas.js中）中也有一些重要的方法/屬性：

屬性direction：指定希望監(jiān)聽的屬性變化的方向。可以設(shè)定為In，Out或者InOut。默認(rèn)值為In。

方法evaluateOut：與基類中的方法evaluateIn類似，但是以相反的方向執(zhí)行。當(dāng)然，需要將directiton屬性設(shè)定為Out或者InOut。希望這些解釋能夠讓您對(duì)Atlas的“神奇的”綁定有一些更深入的理解。歡迎留言探討。

上一篇：網(wǎng)站項(xiàng)目系統(tǒng)分析及軟件建模

下一篇：用戶手冊(cè)在軟件質(zhì)量中的地位