在學(xué)習(xí)Flex3.0的過程中，你會(huì)經(jīng)常遇到Flex3.0數(shù)據(jù)綁定問題，這里和大家分享一下它的使用，F(xiàn)lex3.0數(shù)據(jù)綁定是連接一個(gè)對(duì)象中數(shù)據(jù)到另一個(gè)對(duì)象的處理過程。

使用Flex3.0數(shù)據(jù)綁定來處理數(shù)據(jù)

Flex3.0數(shù)據(jù)綁定是連接一個(gè)對(duì)象中數(shù)據(jù)到另一個(gè)對(duì)象的處理過程。它提供了在應(yīng)用程序中傳遞數(shù)據(jù)的方便的途徑。

AdobeFlex3提供幾個(gè)途徑來指定Flex3.0數(shù)據(jù)綁定:

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

使用大括號(hào)({})語法

Flex3.0數(shù)據(jù)綁定需要源屬性，目標(biāo)屬性，觸發(fā)事件。觸發(fā)事件表名了合適需要從源向目標(biāo)拷貝數(shù)據(jù)。下邊的例子展示了一個(gè)Text控件獲得Hslider控件值屬性的數(shù)據(jù)。在大括號(hào)中的屬性名是綁定表達(dá)式的源屬性。當(dāng)原屬性的值發(fā)生變化，F(xiàn)lex復(fù)制源屬性的當(dāng)前值mySlider.value到目標(biāo)屬性，Text控件的text屬性。

連接：要查看使用大括號(hào)語法更復(fù)雜的關(guān)于Flex3.0數(shù)據(jù)綁定的例子，查看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> 
 

 使用在大括號(hào)中ActionScript表達(dá)式

大括號(hào)中的綁定表達(dá)式能夠被包含在ActionScript表達(dá)式中用來發(fā)回一個(gè)結(jié)果。例如你能夠使用大括號(hào)語法用于下邊類型的綁定：

◆在大括號(hào)中一個(gè)單獨(dú)的可綁定屬性
◆在大括號(hào)中使用字符串串聯(lián)，其中報(bào)站一個(gè)可綁定的屬性
◆在大括號(hào)中基于可綁定屬性的計(jì)算
◆在大括號(hào)中使用條件運(yùn)算來判斷一個(gè)可綁定屬性
下邊的例子中這事了用戶界面中使用了每一種類型的綁定表達(dá)式

例子

<?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快捷鍵用法指導(dǎo)
3. Flex框架Riawave的定制應(yīng)用
4. 技術(shù)前沿 Flex2.0 從零開始實(shí)現(xiàn)文件上傳
5. FlexBuilder開發(fā)方法及特點(diǎn)解析