Flex3.0数据绑定的两种方式-51CTO.COM

在学习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>

【编辑推荐】