flex 数据绑定（一）

?????? 数据绑定是将一个对象中的数据同另一个对象中的数据联系在一起的过程。数据绑定为在应用的不同层之间传递数据提供了便捷方法。数据绑定需要一个源属性，一个目的属性，以及用于表明何时将数据从源属性拷贝到目的属性的触发事件。当源属性变化时，对象发出触发事件。?

???? Adobe Flex提供三种方法用于指定数据绑定：MXML中的大括号({})语法，MXML中的<mx:Binding>标记，以及ActionScript中的 BindingUtils 的系列方法。

???1? ?下面的例子使用大括号({})语法来展示一个Text控件，该控件的数据来自于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把源属性myTI.text的当前值拷贝到目的属性。

?????2??? 用<mx:Binding>标记作为大括号语法的替代方法。在使用<mx:Binding>时，要为<mx:Binding>标记提供一个源属性作为标记的source属性以及提供一个目的属性作为标记的destination属性。

?? 下面的例子使用<mx:Binding>标记定义了一个从TextInput控件到Text控件的数据绑定：?

 
 

<?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>标记也能实现将多个源属性绑定到一个相同的 目的属性，这是因为能够定义多个具有相同的destination属性的<mx:Binding>标记。例子请参照“绑定多个源属性到一个目的属性”。?

???3? ?大括号语法和<mx:Binding>标记都能在编译期定义数据绑定，而使用 ActionScript代码则可以在运行期定义数据绑定，如下例所示：?

 
 

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