Flex DataBinding用法指導
本文和大家重點討論一下Flex DataBinding的概念,Flex DataBindIng簡單的說就是當綁定源屬性發生變化時,Flex會把綁定源變化后屬性的值賦給目的物的屬性,做到了數據同步。
Flex DataBinding詳解
[Bindable]作用
Flex DataBindIng簡單的說就是當綁定源屬性發生變化時,Flex會把綁定源變化后屬性的值賦給目的物的屬性,做到了數據同步。
◆Flex DataBindIng什么時候發生:
1.在綁定源屬性值發生改變時發生。
2.在綁定源發出initialize事件時綁定發生一次。
◆讓屬性具有可綁定功能:
一般的,只要在屬性前加上[Bindable]或[Bindable(event="eventname")]
元標記即可
注意:
如果沒有標出觸發綁定的事件,正如[Bindable],Flex會自動為綁定加上propertyChange事件,當源數據發生變化時,Flex將自動派發該事件,觸發數據綁定。如果修改后數據和源數據“===”也就是全等,那么Flex將不會觸發數據綁定。
如果標出的觸發綁定的事件,正如[Bindable(event="eventname")],那么在源數據發生改變的時候,必須dispatch出該事件才能觸發數據綁定。不論修改后數據和源數據是否全等,Flex都將會觸發數據綁定,需要自己編程控制,例如:
- <mx:Script>
- <!--[CDATA[
- [Bindable(event="hhhh")]
- privatevarss:String="aaa";
- privatefunctiondoTest():void
- {
- ss="bbb";
- f(ss!=="aaa")//判斷和源數據是否相等,不相等則觸發綁定
- this.dispatchEvent(newEvent("hhhh"));
- }
- ]]-->
- </mx:Script>
- <mx:Texttextmx:Texttext="{ss}"/>
- <mx:Buttonclickmx:Buttonclick="doTest()"/>
如果沒有this.dispatchEvent(newEvent("hhhh"))這句,那么你點擊按鈕是沒有設么作用的。另外當申明自定義觸發事件時,用ChangeWatcher來監控其變化,發現雖然目的源值變了,但是ChangeWatcher卻監控不到變化,同樣ChangeWatcher也監控不到非共有變量的變化。關于ChangeWatcher,下面會提到。
◆Flex DataBinding綁定函數——Functions,對象——Object,數組——Arrays
函數:
你可以在{}中直接使用函數。例如:<mx:Texttext="{Matn.random()*ss}"/>
上面這個沒有什么好講的,關于函數綁定下面這個比較重要:
- <mx:Script>
- <!--[CDATA[
- publicvarss:String="aaa";
- [Bindable(event="hhhh")]
- privatefunctiongg():String
- {
- returnss;
- }
- privatefunctiondoTest():void
- {
- ss=Math.random().toString();
- this.dispatchEvent(newEvent("hhhh"));
- }
- ]]-->
- </mx:Script>
- <mx:Texttextmx:Texttext="{gg()}"/>
- <mx:Buttonclickmx:Buttonclick="doTest()"/>
這樣給函數加一個[bindable],便使函數具有Flex DataBinding綁定功能,但是如果不申明自定義觸發事件,只能在組件初始化時綁定一次,點擊以上按鈕是沒有什么作用的。大家可以自己試試。
還有getter和setter函數,比較重要,給getter或setter函數加上[bindable],用不著兩個都加,加一個就可以了,例如:
- <mx:Script>
- <!--[CDATA[
- publicvarss:String="aaa";
- [Bindable]
- publicfunctiongetgg():String
- {
- returnss;
- }
- publicfunctionsetgg(value:String):void
- {
- ss=value;
- }
- privatefunctiondoTest():void
- {
- gg=Math.random().toString();
- this.dispatchEvent(newEvent("hhhh"));
- }
- ]]-->
- </mx:Script>
- <mx:Texttextmx:Texttext="{gg}"/>
- <mx:Buttonclickmx:Buttonclick="doTest()"/>
同樣能達到Flex DataBinding綁定效果,如果只有一個getter方法,那么要想實現數據綁定,就需要申明自定義觸發事件了,大家可以自己試試。
【編輯推薦】
- Flex Dataprovider和Data概念解析
- Flex必須了解的那些事
- 解析Flex ArrayCollection復制的兩種方式
- FlexBuilder3.0與Eclipse3.4的完美結合
- Flex ComboBox和Datagrid組件用法指導