Flex的三种绑定

 Flex实际上在编译的时候会产生一些Watcher代码去监视绑定标签所指定的表达式。在运行的时候，当绑定源的属性得到修改，那么这个Watcher监视类就会触发change事件去执行绑定更新的工作。在Flex中有三种绑定数据方式：
1、{}
2、<mx:Binding> tag in MXML
3、BindingUtils methods in ActionScript
1、最常用的就是通过大括号{}的形式。
在{}绑定方式中，可以绑定property，ActionScript expressions，E4
X expression和ActionScriptfunctions。绑定一个属性或者一段AS的表达式已经应用的非常普遍了。偶尔我们需要用到绑定的是一个AS的函数，但是，绑定一个函数的时候很多人会碰到问题，为什么我的数据没有自动更新呢？本人也曾经碰到过，看了开发文档才知道，原来忽略了一个细节问题。
就是在绑定函数的时候，通常情况下需要一个bindable的property作为该函数的参数。
如
Java代码

1. <?xml version="1.0"?>  
2. <!– binding/ASInBraces.mxml –>  
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
4.      <mx:Script>  
5.           <![CDATA[  
6.               [Bindable]  
7.               public var inString:String; // 绑定此变量  
8.            
9.               public function getNewText(sourceString:String):String {  
10.                    return sourceString.toUpperCase();  
11.               }  
12.          ]]>  
13.      </mx:Script>  
14.      <mx:TextInput id="myTI" text="Enter text here"/>  
15.      <mx:Button label="Trigger Binding" click="inString=myTI.text;"/>  
16.      <mx:TextArea text="{getNewText(inString)}"/>  
17. </mx:Application>  

<?xml version="1.0"?><!– binding/ASInBraces.mxml –>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Script>
          <![CDATA[
              [Bindable]
              public var inString:String; // 绑定此变量

              public function getNewText(sourceString:String):String {
                   return sourceString.toUpperCase();
              }
         ]]>
     </mx:Script>
     <mx:TextInput id="myTI" text="Enter text here"/>
     <mx:Button label="Trigger Binding" click="inString=myTI.text;"/>
     <mx:TextArea text="{getNewText(inString)}"/>
</mx:Application>

这里的inString一旦发生改变，会直接触发函数getNewText进行重新执行。
但如果你将函数的参数inString去掉，而直接放到getNewText()中，那么这个函数会在系统初始化的时候执行一次，而起不到绑定的效果。我可是在实际开发中有深刻体会。
2、用<mx:Binding>标签效果和{}一样，只需要指定source和destination两个属性即可，如：
<mx:Binding source="firstName.text" destination="myEmployee.name.first"/>
在<mx:Binding>的source属性中也可以使用{}，如下面的例子中，其效果是等同的
Java代码

1. <?xml version="1.0"?>  
2. <!– binding/ASInBindingTags.mxml –>  
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
4.      <mx:Script>  
5.           <![CDATA[  
6.               public function whatDogAte():String {  
7.                    return "homework";  
8.               }  
9.          ]]>  
10.      </mx:Script>  
11.      <mx:Binding source="’The dog ate my ‘+ whatDogAte()"  destination="field1.text"/>  
12.      <mx:Binding  source="{’The dog ate my ‘+ whatDogAte()}" destination="field2.text"/>  
13.      <mx:Binding source="The dog ate my {whatDogAte()}" destination="field3.text"/>  
14.      <mx:TextArea id="field1"/>  
15.      <mx:TextArea id="field2"/>  
16.      <mx:TextArea id="field3"/>  
17. </mx:Application>  

<?xml version="1.0"?><!– binding/ASInBindingTags.mxml –>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Script>
          <![CDATA[
              public function whatDogAte():String {
                   return "homework";
              }
         ]]>
     </mx:Script>
     <mx:Binding source="’The dog ate my ‘+ whatDogAte()"  destination="field1.text"/>
     <mx:Binding  source="{’The dog ate my ‘+ whatDogAte()}" destination="field2.text"/>
     <mx:Binding source="The dog ate my {whatDogAte()}" destination="field3.text"/>
     <mx:TextArea id="field1"/>
     <mx:TextArea id="field2"/>
     <mx:TextArea id="field3"/>
</mx:Application>

3、在ActionScript中实现绑定
这种方法是使用mx.binding.utils.BindingUtils类来实现的。
如：
BindingUtils.bindProperty(textarea, "text", textinput, "text");
就是直接绑定了两个输入框的text属性，还可以用bindSetter来绑定一个数据源和一个set函数。如：
public function mySetterBinding(event:FlexEvent):void {
     var watcherSetter:ChangeWatcher =  BindingUtils.bindSetter(setMyString, textInput2, "text");
}
这里就是将textInput2的text属性setter函数和setMyString函数绑定起来，
一旦textInput2的text被修改，那么将会触发setMyString函数