原文地址:http://blog.chinaunix.net/uid-122937-id-3010668.html
1 概述
[Bindable]是元标签,元标签不是语法的一部分,而是专门给编译器用的,是告诉编译器做某些事情。[Bindable]的作用是:告诉 flex编译器给某些某些东西建立绑定关系
当你在没有添加事件设置的情形下使用 Bindable 标记时,propertyChange 是将被下发的默认事件类型。 因此,[Bindable] 标记等同于 Bindable(event="propertyChange")或[Bindable("propertyChange")]。
下面的代码
- [Bindable]
- public var testData:String;
<mx:Text x="54" y="56" text="{testData}"/>
- [Bindable(event="propertyChange")]
- public function get testData():String
- {
- return this._1147269284testData;
- }
-
- public function set testData(value:String):void
- {
- var oldValue:Object = this._1147269284testData;
- if (oldValue !== value) {
- this._1147269284testData = value;
- if (this.hasEventListener("propertyChange"))
- this.dispatchEvent(mx.events.PropertyChangeEvent.createUpdateEvent
- (this, "testData", oldValue, value));
- }
- }
Text控件监听propertyChange事件,如果有事件发生,则通过get方法修改其绑定的值
3 属性绑定
3.1 在类的属性之前
格式为:
- [Bindable]
- public var foo;
如果 标出的触发绑定的事件 ,正如[Bindable(event="eventname")],那么在源数据发生改变的时候,必须dispatch出该事件才能触发数据绑定。不论修改后数据和源数据是否全等,Flex都将会触发数据绑定,需要自己编程控制,例如:
点击(此处)折叠或打开
- <fx:Script>
- <![CDATA[
- [Bindable(event="hhhh")]
- private var ss:String="aaa";
-
- private function doTest():void
- {
- ss="bbb";
-
- if(ss!=="aaa")//判断和源数据是否相等,不相等则触发绑定
- this.dispatchEvent(new Event("hhhh"));
- }
- ]]>
- </fx:Script>
-
- <mx:Text x="54" y="56" text="{ss}"/>
- <s:Button x="94" y="56" click="doTest()"/>
如果没有this.dispatchEvent(new Event("hhhh"))这句或 [ Bindable ( event = "hhhh" ) ] ,那么你点击按钮是没有设么作用的。
这么做还有一个好处,修改了默认的监听事件propertyChange,因为propertyChange事件会比较多,这样省略了大量的判定,提高了处理速度。
如果我们想修改Bindable的事件,一般写代码时,会写成下面的格式。
3.2 在属性的getter或setter方法之前
这是最常见的写法
最好同时定义getter和setter方法,给getter或setter函数加上[bindable],用不着两个都加,加一个就可以了,例如
- <fx:Script>
- <![CDATA[
-
- public var ss:String="aaa";
-
- var i:int=1;
- var j:int=1;
-
- [Bindable("hhhh")]
- public function get gg():String
- {
- lb.text="get gg被调用"+i.toString();
- i++;
- return ss;
- }
- public function set gg(value:String):void
- {
- ss=value;
- lb2.text="set gg被调用"+j.toString();
- j++;
-
- }
- private function doTest():void
- {
- gg=Math.random().toString();
- this.dispatchEvent(new Event("hhhh"));
- }
- ]]>
- </fx:Script>
- <s:Label id="lb" x="180" y="30" text="get"/>
- <s:Label id="lb2" x="180" y="60" text="set"/>
- <s:Button label="{gg}" x="80" y="30" width="50" height="50" click="doTest()"/>
网页刚启动时,结果如下
说明Button中label的值,是通过get gg()函数获取的。当我们点击一下按钮,结果如下
点击了一次按钮后,
gg = Math . random ( ) . toString ( ) ; 使得set gg()函数被调用了次,
由于派发了事件hhhh,监听器监听到后,调用get gg()修改了Button中label的值,而get gg()被调用了2次, 多了一次,无法解释 。
4.对象绑定
假设有一个对象NonBindableObject,拥有二个属性
[Bindable]
public class NonBindableObject extends Object{
public var stringProp:String = "String property";
public var intProp:int = 52;
}
如果在申明对象时没有在类前加上[bindable]标签,那么该对象的所有属性是不能被绑定的,也就是说当对象属性发生变化时,不会触发绑定,所以点击前两个按钮都是没有用的,只有当该对象本身发生变化时,才能够触发绑定,正如第三个按钮的操作。
点击(此处)折叠或打开
- <?xml version="1.0" encoding="utf-8"?>
- <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx"
- minWidth="955" minHeight="600"
- creationComplete="initObj()"
- >
- <fx:Declarations>
- <!-- 将非可视元素(例如服务、值对象)放在此处 -->
- </fx:Declarations>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
-
- <fx:Script>
- <![CDATA[
- import mx.events.FlexEvent;
- [Bindable]
- public var myObj:NonBindableObject = new NonBindableObject();
-
- [Bindable]
- public var anotherObj:NonBindableObject =new NonBindableObject();
-
- public function initObj():void {
- anotherObj.stringProp = 'anotherObject';
- anotherObj.intProp = 8;
- }
-
-
- ]]>
- </fx: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;"/>
-
- </s:Application>
点击(此处)折叠或打开
- package
- {
- [Bindable]//去掉后属性就会没有绑定效果
- public class NonBindableObject extends Object
- {
- public function NonBindableObject()
- {
- super();
- }
-
- public var stringProp:String = "String property";
-
- public var intProp:int = 52;
- }
- }
如果对对象进行绑定,则会绑定所有的public属性和拥有getter和setter方法的属性具有绑定功能。
5.数组与绑定
如果把数组作为绑定对象,那么最好使用ArrayCollection对象,因为当使用ArrayCollection对象的一些API来操作数组会触发数据绑定,如:ArrayCollection.addItem(), ArrayCollection.addItemAt(), ArrayCollection.removeItem(), and ArrayCollection.removeItemAt()方法,不然要直接使用Array的话,只用当Array本身发生变化时才触发数据绑定,当数组中某一属性发生变化时是不会触发数据绑定的。
6.绑定的使用方式
6.1mx:Binding
数据绑定除了用[Bindable]标签来申明以外,也可以用<mx:Binding/>组件和ActionScript实现。
例如:
<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机制优化过,不会引起死循环。
6.2 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为绑定源,chain为绑定源属性链——关于属性链下面再讲,commitOnly默认为False,即不管是确认事件还是未确认事件都将触发绑定,而为True时,只有确认事件才能触发绑定,这个一般用不到,和Flex自身的事件机制有关,如果为false的话,当数据改变时将触发两次绑定事件,当为True时,只触发一次,自己可以用bindSetter方法来做测试。当不想绑定时可以用myc.unwatch()方法来解除绑定。
6.3 使用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就是当绑定源发生变化时所触发的函数,其他参数都一样。
6.4 使用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"])。
参考文献
1.Flex 2 中的元数据标签. http://www.iteye.com/topic/152024
2.如何使变量进行Flex数据绑定. http://developer.51cto.com/art/201007/215153.htm
3.Flex Data Binding详解. http://www.bianceng.cn/webkf/flex/201004/16558.htm