在學習Flex3.0的過程中，你會經常遇到Flex3.0數據綁定問題，這里和大家分享一下它的使用，Flex3.0數據綁定是連接一個對象中數據到另一個對象的處理過程。

使用Flex3.0數據綁定來處理數據

Flex3.0數據綁定是連接一個對象中數據到另一個對象的處理過程。它提供了在應用程序中傳遞數據的方便的途徑。

AdobeFlex3提供幾個途徑來指定Flex3.0數據綁定:

◆使用大括號({})語法。
◆使用在大括號中ActionScript表達式
◆在MXML中使用<mx:Binding>標簽
◆在ActionScript中使用綁定
 

使用大括號({})語法

Flex3.0數據綁定需要源屬性，目標屬性，觸發事件。觸發事件表名了合適需要從源向目標拷貝數據。下邊的例子展示了一個Text控件獲得Hslider控件值屬性的數據。在大括號中的屬性名是綁定表達式的源屬性。當原屬性的值發生變化，Flex復制源屬性的當前值mySlider.value到目標屬性，Text控件的text屬性。

連接：要查看使用大括號語法更復雜的關于Flex3.0數據綁定的例子，查看Definingdatamodels

例子

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" 
viewSourceURL="src/DataBindingSimple/index.html" 
width="250"height="150"  
> 
<mx:Panel 
title="Simpledatabinding" 
 
paddingLeft="10"paddingRight="10"paddingBottom="10" 
paddingTop="10" 
horizontalAlign="center" 
 
> 
<mx:HSlideridmx:HSliderid="mySlider"/> 
<mx:Texttextmx:Texttext="{mySlider.value}"/> 
</mx:Panel> 
 
</mx:Application> 
 

 使用在大括號中ActionScript表達式

大括號中的綁定表達式能夠被包含在ActionScript表達式中用來發回一個結果。例如你能夠使用大括號語法用于下邊類型的綁定：

◆在大括號中一個單獨的可綁定屬性
◆在大括號中使用字符串串聯，其中報站一個可綁定的屬性
◆在大括號中基于可綁定屬性的計算
◆在大括號中使用條件運算來判斷一個可綁定屬性
下邊的例子中這事了用戶界面中使用了每一種類型的綁定表達式

例子

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" 
viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html" 
width="420"height="350"  
> 
<mx:Modelidmx:Modelid="myModel"> 
 
<myModel> 
<!--Performsimplepropertybinding.--> 
<a>{nameInput.text}</a> 
<!--Performstringconcatenation.--> 
<b>Thisis{nameInput.text}</b> 
 
<!--Performacalculation.--> 
<c>{(Number(numberInput.text)asNumber)*6/7}</c> 
 
<!--Performaconditionaloperationusingaternaryoperator;  
thepersonobjectcontainsaBooleanvariablecalledisMale.--> 
<d>{(isMale.selected)?"Mr.":"Ms."}{nameInput.text}</d> 
</myModel> 
 
</mx:Model> 
 
<mx:Panel 
paddingBottom="10"paddingLeft="10"paddingRight="10"paddingTop="10"  
 
width="100%"height="100%"  
title="Bindingexpressions" 
> 
<mx:Form> 
<mx:FormItemlabelmx:FormItemlabel="LastName:"> 
 
<mx:TextInputidmx:TextInputid="nameInput"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="Selectsex:"> 
<mx:RadioButton 
id="isMale" 
label="Male" 
groupName="gender" 
 
selected="true" 
/> 
<mx:RadioButton 
id="isFemale" 
label="Female" 
groupName="gender" 
 
/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="Enteranumber:"> 
<mx:TextInputidmx:TextInputid="numberInput"text="0"/> 
 
</mx:FormItem> 
</mx:Form> 
 
<mx:Texttextmx:Texttext="{'Simplebinding:'+myModel.a}"/> 
<mx:Texttextmx:Texttext="{'Stringconcatenation:'+myModel.b}"/> 
 
<mx:Texttextmx:Texttext="{'Calculation:'+numberInput.text+'*6/7='+myModel.c}"/> 
<mx:Texttextmx:Texttext="{'Conditional:'+myModel.d}"/> 
 
</mx:Panel> 
</mx:Application> 
 

【編輯推薦】

1. 探秘Flex與JavaScript交互
2. 常用FlexBuilder快捷鍵用法指導
3. Flex框架Riawave的定制應用
4. 技術前沿 Flex2.0 從零開始實現文件上傳
5. FlexBuilder開發方法及特點解析