本文和大家重點(diǎn)學(xué)習(xí)一下Flex數(shù)據(jù)綁定，Adobe Flex 提供三種方法用于指定Flex數(shù)據(jù)綁定：MXML 中的大括號(hào)({})語(yǔ)法，MXML 中的<mx:Binding>標(biāo)記，以及ActionScript 中的BindingUtils 的系列方法。

關(guān)于Flex數(shù)據(jù)綁定

Flex數(shù)據(jù)綁定是將一個(gè)對(duì)象中的數(shù)據(jù)同另一個(gè)對(duì)象中的數(shù)據(jù)聯(lián)系在一起的過程。Flex數(shù)據(jù)綁定為在應(yīng)用的不同層之間傳遞數(shù)據(jù)提供了便捷方法。Flex數(shù)據(jù)綁定需要一個(gè)源屬性，一個(gè)目的屬性，以及用于表明何時(shí)將數(shù)據(jù)從源屬性拷貝到目的屬性的觸發(fā)事件。當(dāng)源屬性變化時(shí)，對(duì)象發(fā)出觸發(fā)事件。

Adobe Flex 提供三種方法用于指定Flex數(shù)據(jù)綁定：MXML 中的大括號(hào)({})語(yǔ)法，MXML 中的<mx:Binding>標(biāo)記，以及ActionScript 中的BindingUtils 的系列方法。

(1)下面的例子使用大括號(hào)({})語(yǔ)法來展示一個(gè)Text 控件，該控件的數(shù)據(jù)來自于TextInput 控件Text 屬性： 

<?xml version="1.0"?> 
<!-- binding/BasicBinding.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:TextInput id="myTI" text="Enter text here"/> 
<mx:Text id="myText" text="{myTI.text}"/> 
</mx:Application> 
 

 Flex數(shù)據(jù)綁定表達(dá)式中可以將ActionScript 代碼以及E4X 表達(dá)式作為一部分包含進(jìn)來，如下例所示：
 

<?xml version="1.0"?> 
<!-- binding/BasicBindingWithAS.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:TextInput id="myTI"/> 
<mx:Text id="myText" text="{myTI.text.toUpperCase()}"/> 
</mx:Application> 

 
(2)用<mx:Binding>標(biāo)記作為大括號(hào)語(yǔ)法的替代方法。

在使用<mx:Binding>時(shí)，要為<mx:Binding>標(biāo)記提供一個(gè)源屬性作為標(biāo)記的source 屬性以及提供一個(gè)目的屬性作為標(biāo)記的destination 屬性。下面的例子使用<mx:Binding>標(biāo)記定義了一個(gè)從TextInput 控件到Text 控件的Flex數(shù)據(jù)綁定：

<?xml version="1.0"?> 
<!-- binding/BasicBindingMXML.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:TextInput id="myTI"/> 
<mx:Text id="myText"/> 
<mx:Binding source="myTI.text" destination="myText.text"/> 
</mx:Application> 
 

 同大括號(hào)語(yǔ)法相比，用<mx:Binding>標(biāo)記能夠?qū)⒁晥D（用戶界面）同模型完全分離。
<mx:Binding>標(biāo)記也能實(shí)現(xiàn)將多個(gè)源屬性綁定到一個(gè)相同的目的屬性，這是因?yàn)槟軌蚨x多個(gè)具有相同的destination 屬性的<mx:Binding>標(biāo)記.

大括號(hào)語(yǔ)法和<mx:Binding>標(biāo)記都能在編譯期定義Flex數(shù)據(jù)綁定，而使用ActionScript 代碼則可以在運(yùn)行期定義Flex數(shù)據(jù)綁定，如下例所示： 

<?xml version="1.0"?> 
<!-- binding/BasicBindingAS.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Script> 
<![CDATA[  
import mx.binding.utils.*;  
// Define data binding.  
public function initBindingHandler():void {  
BindingUtils.bindProperty(myText, "text", myTI, "text");  
}  
]]> 
</mx:Script> 
<mx:TextInput id="myTI"/> 
<mx:Text id="myText" preinitialize="initBindingHandler();"/> 
</mx:Application> 
 

 
(3)創(chuàng)建用作Flex數(shù)據(jù)綁定源的屬性

當(dāng)創(chuàng)建一個(gè)用于綁定表達(dá)式源的屬性，那么在源屬性值發(fā)生變化時(shí)Flex 就能自動(dòng)將值拷貝到所有的目的屬性。為了讓Flex 執(zhí)行拷貝，必須使用[Bindable]標(biāo)記來向Flex 注冊(cè)這個(gè)屬性。
The [Bindable] 元數(shù)據(jù)標(biāo)記有以下語(yǔ)法:
 

[Bindable]  
[Bindable(event="eventname")] 

如果忽略了事件名稱，F(xiàn)lex 自動(dòng)地創(chuàng)建一個(gè)名為propertyChange 的事件，并且在屬性發(fā)生變化時(shí)，由Flex 發(fā)出這個(gè)事件以觸發(fā)所有以這個(gè)屬性作為源的Flex數(shù)據(jù)綁定。

下面的例子作了一個(gè)maxFontSize 屬性和一個(gè)minFontSize 屬性變量可用于Flex數(shù)據(jù)綁定表達(dá)式的源：
 

<?xml version="1.0"?> 
<!-- binding/FontPropertyBinding.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Script> 
<![CDATA[  
// Define public vars for tracking font size.  
[Bindable]  
public var maxFontSize:Number = 15;  
[Bindable]  
public var minFontSize:Number = 5;  
]]> 
</mx:Script> 
<mx:Text text="{maxFontSize}"/> 
<mx:Text text="{minFontSize}"/> 
<mx:Button click="maxFontSize=20; minFontSize=10;"/> 
</mx:Application> 

【編輯推薦】

1. 術(shù)語(yǔ)匯編 Flex數(shù)據(jù)綁定概述
2. Flex數(shù)據(jù)綁定陷阱
3. Flex數(shù)據(jù)綁定中難以發(fā)現(xiàn)的無聲錯(cuò)誤
4. 解析Flex全屏模式設(shè)置方法
5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則