Flex Data Binding詳解

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沒有。
資料繫結除了用[Bindable]標籤來申明以外，也可以用<mx:Binding/>組件和ActionScript實現。
用<mx:Binding/>，例如：
<mx:binding source="text1.text" destination="text2.text"/>
<mx:binging source="text2.text" destination="text1.text"/>
<mx:TextInput id="text1"/>
<mx:TextInput id="text2"/>
source為繫結來源，destination為目的源,按上面的寫法，不論是text1還是text2發生變化，都會引起對方的變化。細心的你也許會想這不會引起死迴圈嗎？答案是否定的，不會引起死迴圈。我想應該是Flex內部的機制已經最佳化了這種情況，讓其只觸發一次。
用ActionScript來綁定：
1.使用bindProperty()。
bindProperty(site:Object, prop:String,host:Object, chain:Object,commitOnly:Boolean = false):ChangeWatcher，例如：
var myc:ChangeWatcher=BindingUtils.bindProperty(text2,"text",text1,"text");
即當text1的值發生變化時text2也跟著變，site為目的對象，prop為目的屬性，host為繫結來源，china為繫結來源屬性鏈——關於屬性鏈下面再講，commitOnly預設為False，即不管是確認事件還是未確認事件都將觸發綁定，而為True時，只有確認事件才能觸發綁定，這個一般用不到，和Flex自身的事件機制有關，如果為false的話，當資料改變時將觸發兩次綁定事件，當為True時，只觸發一次，自己可以用bindSetter方法來做測試。當不想綁定時可以用myc.unwatch()方法來解除綁定。

2.使用bindSetter()。
bindSetter(setter:Function, host:Object, chain:Object,commitOnly:Boolean = false):ChangeWatcher，例如：
var myc:ChangeWatcher=BindingUtils.bindSetter(change,text1,"text",true);
private function change(str:String):void
{
text2.text=str;
}
change就是當繫結來源發生變化時所觸發的函數，其他參數都一樣。
3.使用ChangeWatcher.watch()。
同樣可以用ChangeWatcher.watch方法來監控對象屬性的變化，非常有用。
watch(host:Object, chain:Object,handler:Function,commitOnly:Boolean = false):ChangeWatcher，例如：
var myc:ChangeWatcher=ChangeWatcher.watch(text1,"text",change)；
private function change(e:Event):void
{
text2.text=text1.text;
}
這裡的Event和綁定資料所定義的觸發事件有關，你可以用所有事件的父類Event來表示。

注意：
as主要是通過mx.binding.utils.BindingUtils 這個類來實現資料繫結，用MXML和as實現資料繫結有以下幾點不同：
1.當使用AS做資料繫結時，bindProperty()或 bindSetter()方法中不能使用AS代碼，這和MXML是不同的， 可以用bindSetter() 方法來申明一個綁定處理函數。
2.當使用AS做資料繫結時，同樣不能使用EX4文法，也就是說不能直接使用XML解析文法了。
3.當使用AS做資料繫結時，在屬性鏈中不能使用任何函數和數組。
4.MXML具有更好的錯誤提示和警告功能。
最後來講講屬性鏈。
屬性鏈就是bindProperty()和 bindSettet()等方法中的chain參數所表示的對象， 有時也許繫結來源並不只是text1.text這樣的簡單形式，也可以是類似於user.name.text1.text，那麼就存在一個關係鏈的問題，如果這條鏈中的某一項發生了改變，會不會觸發綁定呢？答案是如果你想讓其改變其中的某一項都能觸發資料繫結，那麼這條鏈的每個元素必須是可綁定的。對於上面的這種形式，可以這樣使用bindProperty方法：
bindProperty(text2, "text", this, ["user", "name","text1","text"])。