本文和大家重點討論一下Flex數(shù)據(jù)綁定的概念，F(xiàn)lex數(shù)據(jù)綁定為在應用的不同層之間傳遞數(shù)據(jù)提供了便捷方法。Flex數(shù)據(jù)綁定需要一個源屬性，一個目的屬性，以及用于表明何時將數(shù)據(jù)從源屬性拷貝到目的屬性的觸發(fā)事件。當源屬性變化時，對象發(fā)出觸發(fā)事件。

Flex數(shù)據(jù)綁定

1.關于Flex數(shù)據(jù)綁定

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

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

(1)下面的例子使用大括號({})語法來展示一個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ù)綁定表達式中可以將ActionScript 代碼以及E4X 表達式作為一部分包含進來，如下例所示：
 

<?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>標記作為大括號語法的替代方法。

在使用<mx:Binding>時，要為<mx:Binding>標記提供一個源屬性作為標記的source 屬性以及提供一個目的屬性作為標記的destination 屬性。下面的例子使用<mx:Binding>標記定義了一個從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> 
 

 
同大括號語法相比，用<mx:Binding>標記能夠將視圖（用戶界面）同模型完全分離。
<mx:Binding>標記也能實現(xiàn)將多個源屬性綁定到一個相同的目的屬性，這是因為能夠定義多個具有相同的destination 屬性的<mx:Binding>標記.

大括號語法和<mx:Binding>標記都能在編譯期定義Flex數(shù)據(jù)綁定，而使用ActionScript 代碼則可以在運行期定義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ù)綁定源的屬性

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

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

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

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

<?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> 
 

 2. 在ActionScript 中定義Flex數(shù)據(jù)綁定

通過使用mx.binding.utils.BindingUtils能夠在ActionScript中定義綁定。這個類定義了幾個靜態(tài)方法，通過使用bindProperty() 方法可以讓我們創(chuàng)建一個到用變量實現(xiàn)的屬性的數(shù)據(jù)
綁定，或者用bindSetter()方法創(chuàng)建一個到用方法實現(xiàn)的屬性的Flex數(shù)據(jù)綁定。

(1)在MXML 與在ActionScript 定義Flex數(shù)據(jù)綁定的區(qū)別

編譯期在MXML 中定義Flex數(shù)據(jù)綁定與在運行期在ActionScript 中定義Flex數(shù)據(jù)綁定有一些不同之處：
◆不能在由bindProperty()或者bindSetter()方法定義綁定表達式中引入ActionScript 代碼。相反，使用bindSetter()方法可以指定一個在綁定發(fā)生時調用的
方法。
◆ 不能在由ActionScript 中定義的綁定表達式中引入E4X 表達式。
◆ 在由the bindProperty()或者bindSetter()方法定義的Flex數(shù)據(jù)綁定表達式的屬性鏈中不能引入函數(shù)或者數(shù)組元素。更多信息見Working with bindable property chains.
◆同運行時使用bindProperty()或者bindSetter()定義的Flex數(shù)據(jù)綁定相比，MXML 編譯器有更好的警告和錯誤檢查支持。

(2)范例：在ActionScript 中定義Flex數(shù)據(jù)綁定

下面的例子是用bindSetter()建立了一個Flex數(shù)據(jù)綁定。bindSetter()方法的參數(shù)設置如下：
◆ 源（source） 對象
◆ 源（source） 屬性名
◆ 當源（source）屬性變化被調用的方法。
下面的范例中，當向TextInput 控件中輸入文本時，文本會被轉換為大寫形式并拷貝給TextArea
控件：
 

<?xml version="1.0"?> 
<!-- binding/BindSetterAS.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Script> 
<![CDATA[  
import mx.binding.utils.*;  
import mx.events.FlexEvent;  
// Method called when myTI.text changes.  
public function updateMyString(val:String):void {  
myTA.text = val.toUpperCase();  
}  
<!-- Event listener to configure binding. -->  
public function mySetterBinding(event:FlexEvent):void {  
var watcherSetter:ChangeWatcher =  
BindingUtils.bindSetter(updateMyString, myTI, "text");  
}  
]]> 
</mx:Script> 
<mx:Label text="Bind Setter using setter method"/> 
<mx:TextInput id="myTI" 
text="Hello Setter" /> 
<mx:TextArea id="myTA" 
initialize="mySetterBinding(event);"/> 
</mx:Application> 

 
(3)定義綁定觀察者 （watchers）

Flex 有個mx.binding.utils.ChangeWatcher 類，可以用這個類來定義一個Flex數(shù)據(jù)綁定觀察者。通常，F(xiàn)lex數(shù)據(jù)綁定觀察者在綁定發(fā)生時激活一個事件監(jiān)聽器?？砂凑障旅娴姆独褂?br /> ChangeWatcher 的watch()即可建立一個Flex數(shù)據(jù)綁定觀察者：
 

<?xml version="1.0"?> 
<!-- binding/DetectWatcher.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
initialize="initWatcher();"> 
<mx:Script> 
<![CDATA[  
import mx.binding.utils.*;  
import mx.events.FlexEvent;  
import mx.events.PropertyChangeEvent;  
public var myWatcher:ChangeWatcher;  
// Define binding watcher.  
public function initWatcher():void {  
// Define a watcher for the text binding.  
ChangeWatcher.watch(textarea, "text", watcherListener);  
}  
// Event listener when binding occurs.  
public function watcherListener(event:Event):void {  
myTA1.text="binding occurred";  
// Use myWatcher.unwatch() to remove the watcher.  
}  
]]> 
</mx:Script> 
<!-- Define a binding expression_r to watch. --> 
<mx:TextInput id="textinput" text="Hello"/> 
<mx:TextArea id="textarea" text="{textinput.text}"/> 
<!-- Trigger a binding. --> 
<mx:Button label="Submit" click="textinput.text='Goodbye';"/> 
<mx:TextArea id="myTA1"/> 
</mx:Application> 

上面的范例中，為Flex數(shù)據(jù)綁定觀察者定義了事件監(jiān)聽器，在這個事件監(jiān)聽器中使用了單個參數(shù)來包含事件對象。事件對象的數(shù)據(jù)類型由被觀察的屬性所決定。每個可綁定的屬性會不同的
事件類型以及相關的事件對象。有關確定事件類型的更多信息見“使用Bindable 元數(shù)據(jù)標記”。
 

【編輯推薦】

1. 學習筆記 如何使變量進行Flex數(shù)據(jù)綁定
2. Flex數(shù)據(jù)綁定簡單技巧
3. 解析三大Flex數(shù)據(jù)綁定方式
4. 解析Flex全屏模式設置方法
5. Flex內存泄露解決方法和內存釋放優(yōu)化原則