Flex Data Binding詳解（上）

Data BindIng簡單的說就是當綁定源屬性發生變化時，Flex 會把綁定源變化後屬性的值賦給目的物的屬性。做到了數據同步。

  Data BindIng 什麼時候發生：

 

  1.在綁定源屬性值發生改變時發生。

  2.在綁定源發出initialize事件時綁定發生一次。

 

  讓屬性具有可綁定功能：

 

   一般的，只要在屬性前加上

  [Bindable] 或
  [Bindable(event="eventname")]

  元標記即可

  注意：

  如果沒有標出觸發綁定的事件，正如[Bindable]，Flex會自動爲綁定加上propertyChange事件，當源數據發生變化時，Flex將自動派發該事件，觸發數據綁定。如果修改後數據和源數據“===”也就是全等，那麼Flex將不會觸發數據綁定。

  如果標出的觸發綁定的事件，正如[Bindable(event="eventname")]，那麼在源數據發生改變的時候，必須dispatch出該事件才能觸發數據綁定。不論修改後數據和源數據是否全等，Flex都將會觸發數據綁定，需要自己編程控制，例如：

 <mx:Script>
        <![CDATA[
          [Bindable(event="hhhh")]
          private var ss:String="aaa";
          
          private function doTest():void
          {
           ss="bbb";

if(ss!=="aaa") / /判斷和源數據是否相等，不相等則觸發綁定
 this.dispatchEvent(new Event("hhhh"));
          }
        ]]>    
    </mx:Script>

 <mx:Text text="{ss}"/>
 <mx:Button click="doTest()"/>

  如果沒有this.dispatchEvent(new Event("hhhh"))這句，那麼你點擊按鈕是沒有設麼作用的。 另外當申明自定義觸發事件時，用ChangeWatcher來監控其變化，發現雖然目的源值變了，但是ChangeWatcher卻監控不到變化，同樣ChangeWatcher也監控不到非共有變量的變化。關於ChangeWatcher，下面會提到。

  綁定函數——Functions,對象——Object,數組——Arrays

  函數：

  你可以在{}中直接使用函數。例如：<mx:Text text="{Matn.random()*ss}"/>

  上面這個沒有什麼好講的，關於函數綁定下面這個比較重要：

  <mx:Script>
        <![CDATA[
          public var ss:String="aaa";
          
          [Bindable(event="hhhh")]
          private function gg():String
          {
           return ss;
          }
          
          private function doTest():void
          {
           ss=Math.random().toString();
           this.dispatchEvent(new Event("hhhh"));
          }
        ]]>    
    </mx:Script>
    
 <mx:Text text="{gg()}"/>
 <mx:Button click="doTest()"/>

  這樣給函數加一個[bindable]，便使函數具有綁定功能，但是如果不申明自定義觸發事件，只能在組件初始化時綁定一次，點擊以上按鈕是沒有什麼作用的。大家可以自己試試。
 

  還有getter和setter函數，比較重要，給getter或setter函數加上[bindable]，用不着兩個都加，加一個就可以了，例如：

 <mx:Script>
        <![CDATA[

         public var ss:String="aaa";
          
          [Bindable]
          public function get gg():String
          {
           return ss;
          }
          
          public function set gg(value:String):void
          {
           ss=value;
          }
          
          private function doTest():void
          {
           gg=Math.random().toString();
           this.dispatchEvent(new Event("hhhh"));
          }
        ]]>    
    </mx:Script>
    
 <mx:Text text="{gg}"/>
 <mx:Button click="doTest()"/>

  同樣能達到綁定效果，如果只有一個getter方法，那麼要想實現數據綁定，就需要申明自定義觸發事件了，大家可以自己試試。

  對象：

  對象綁定最重要的是搞清楚怎麼申明才能使其屬性具有綁定功能，例如：

  申明對象 NonBindableObject 

//[bindable]  先註釋掉這行，測試

public class NonBindableObject extends Object

 {
    
        public function NonBindableObject() {
  super();   
        }
        
        public var stringProp:String = "String property";

        public var intProp:int = 52;
    }

綁定

 <mx:Script>
        <![CDATA[
  [Bindable]
  public var myObj:NonBindableObject = new NonBindableObject();

  [Bindable]   
  public var anotherObj:NonBindableObject = 
      new NonBindableObject();

  public function initObj():void {
      anotherObj.stringProp = 'anotherObject';
      anotherObj.intProp = 8;
  }       
        ]]>    
    </mx:Script>

    <mx:Text id="text1" text="{myObj.stringProp}"/>

    <mx:Text id="text2" text="{myObj.intProp}"/>

    <mx:Button label="改變 myObj.stringProp" 
        click="myObj.stringProp = 'new string';"/>
        
    <mx:Button label="改變 myObj.intProp" 
        click="myObj.intProp = 10;"/>
        
    <mx:Button label="Change myObj" 
        click="myObj = anotherObj;"/>

  如果在申明對象時沒有在類前加上[bindable]標籤，那麼該對象的所有屬性是不能被綁定的，也就是說當對象屬性發生變化時，不會觸發綁定，所以點擊前兩個按鈕都是沒有用的，只有當該對象本身發生變化時，才能夠觸發綁定，正如第三個按鈕的操作。

  現在取消第一行的註釋，使對象屬性可綁定，那麼再點前兩個按鈕試試。只要給對象加上[Bindable]元標記，那麼會使該對象的所有公有屬性——public和擁有getter和setter方法的屬性具有綁定功能。

  數組：

  如果把數組作爲綁定對象，那麼最好使用ArrayCollection對象，因爲當使用ArrayCollection對象的一些API來操作數組會觸發數據綁定，如：ArrayCollection.addItem(), ArrayCollection.addItemAt(), ArrayCollection.removeItem(), and ArrayCollection.removeItemAt()方法 ，不然要直接使用Array的話，只用當Array本身發生變化時才觸發數據綁定，當數組中某一屬性發生變化時是不會觸發數據綁定的。例如：

  <mx:Script>
        <![CDATA[
  import mx.collections.ArrayCollection;

  [Bindable]
  public var myAC:Array =["One", "Two", "Three", "Four"];
      
  [Bindable]
  public var myAC2:Array =["One1", "Two1", "Three1", "Four1"];
        ]]>    
    </mx:Script>
    <mx:Text id="text1" text="{myAC[0]}"/>
    <mx:Text id="text2" text="{myAC.getItemAt(0)}"/>
    <mx:Button id="button1"
        label="改變某一屬性" 
        click="myAC[0]='new One'"/>
    <mx:Button id="button2"
        label="改變對象" 
        click="myAC=myAC2"/>

  當使用[]形式來申明數組時，必須使用ArrayCollection的API方法來實現數據綁定，所以當你點擊第一個按鈕時，text2發生了改變，而text1沒有。

  內容太多，下一篇繼續講。

原文地址：

czx33859066