ActionScript遍历绑定(BindProperty,BindSetter,ChangeWatcher)
程序员文章站
2022-03-22 18:07:56
...
注意: 为防止内存益处,记得调用watcherInstance.unwatch();
在MXML标签中很容易将一个组件的某个属性绑定到某个变量上,
如<mx:TextInput text={person.name}>,其中person定义为bindable。
但是如果不用mxml标签,而只在actionscipt代码里面如何实现类似的绑定呢,即如何将一个变量绑定到另一个变量上,当原变量发生变化时,Flex自动将原变量的值拷贝到目标变量上,当然你可以说自己写代码赋值,但这不是绑定,下面要讨论的是自动绑定相关的内容。
在ActionScript中,使用mx.binding.utils.BindingUtil类完成数据绑定。BindingUtil提供了两个静态方法分别完成绑定属性(bindProperty方法)和绑定方法(bindSetter方法)。
bindProperty()
方法签名
public static function bindProperty(site:Object, prop:String, host:Object, chain:Object, commitOnly:Boolean = false):ChangeWatcher
bindProperty把对象host的属性或属性链的值(由chain参数说明)绑定到对象site的公共属性prop上。更准确地说,Flex将监控host对象中由chain参数声明的公共属性或属性链,当这些属性发生变化时,将会复制新值到site对象的prop属性上。
bindSetter()方法
方法签名
public static function bindSetter(setter:Function, host:Object, chain:Object, commitOnly:Boolean = false):ChangeWatcher
bindSetter()与bindProperty()方法类似,不同的是把对象host的属性或属性链的值(由chain参数说明)传递给setter方法,由setter方法返回最终结果。setter()方法事实上就与绑定相关的事件侦听器方法。bindSetter()方法提供了更多的空间,开发者能够在绑定发生时进一步的处理数据,而不仅仅是单纯的绑定属性。
ChangeWatcher类
bindProperty()方法和bindSetter()都返回ChangeWatcher类实例。类如其名,mx.binding.utils.ChangeWatcher类负责监控绑定数据源的属性或属性链,当它们发生变化时获取通知,调用事件侦听器。关于ChangeWatcher类的具体说明请参考"ActionScript 3.0语言参考"。
在代码13-9中,应用初始化时调用initBinding()方法绑定了txtSrc.text(源)和txtDest.text(目标),也获取了该绑定的ChangeWaatcher实例cw。cw.setHandler方法修改了绑定事件发生后的侦听器方法,也就是说我们用自己的watcherListner()方法替换了bindProperty()默认的事件处理方法。
watcherListner()从cw.getValue()获取所监控属性或属性链的更新数据,并复制到目标对象(txtDest.text)上。一切都与绑定的默认行为一样。只不过我们埋下了一个圣诞彩蛋,如果txtSrc.text的值为"unbind"的时候,就利用cw.unwatch()解除绑定。
代码13-9:ChangeWatcher类的样例
该样例的运行结果如图13-3所示,在"数据源"中输入unbind后,绑定关系就被解除了。
属性链
数据绑定中很重要的一环就是指定监听哪些数据源。Flex不仅可以监控单一的属性,也能够监控属性链。
在下面这个例子中,属性链为book.name,属性链中的任何一环发生变化,都会调度绑定的事件侦听器方法。
BindingUtils.bindProperty(txtDest,"text",,this,["book","name"]);
使用MXML也能够达到同样的目的:
<mx:Text id="txtDest" text="{book.name }"/>
案例
在MXML标签中很容易将一个组件的某个属性绑定到某个变量上,
如<mx:TextInput text={person.name}>,其中person定义为bindable。
但是如果不用mxml标签,而只在actionscipt代码里面如何实现类似的绑定呢,即如何将一个变量绑定到另一个变量上,当原变量发生变化时,Flex自动将原变量的值拷贝到目标变量上,当然你可以说自己写代码赋值,但这不是绑定,下面要讨论的是自动绑定相关的内容。
在ActionScript中,使用mx.binding.utils.BindingUtil类完成数据绑定。BindingUtil提供了两个静态方法分别完成绑定属性(bindProperty方法)和绑定方法(bindSetter方法)。
bindProperty()
方法签名
public static function bindProperty(site:Object, prop:String, host:Object, chain:Object, commitOnly:Boolean = false):ChangeWatcher
bindProperty把对象host的属性或属性链的值(由chain参数说明)绑定到对象site的公共属性prop上。更准确地说,Flex将监控host对象中由chain参数声明的公共属性或属性链,当这些属性发生变化时,将会复制新值到site对象的prop属性上。
bindSetter()方法
方法签名
public static function bindSetter(setter:Function, host:Object, chain:Object, commitOnly:Boolean = false):ChangeWatcher
bindSetter()与bindProperty()方法类似,不同的是把对象host的属性或属性链的值(由chain参数说明)传递给setter方法,由setter方法返回最终结果。setter()方法事实上就与绑定相关的事件侦听器方法。bindSetter()方法提供了更多的空间,开发者能够在绑定发生时进一步的处理数据,而不仅仅是单纯的绑定属性。
ChangeWatcher类
bindProperty()方法和bindSetter()都返回ChangeWatcher类实例。类如其名,mx.binding.utils.ChangeWatcher类负责监控绑定数据源的属性或属性链,当它们发生变化时获取通知,调用事件侦听器。关于ChangeWatcher类的具体说明请参考"ActionScript 3.0语言参考"。
在代码13-9中,应用初始化时调用initBinding()方法绑定了txtSrc.text(源)和txtDest.text(目标),也获取了该绑定的ChangeWaatcher实例cw。cw.setHandler方法修改了绑定事件发生后的侦听器方法,也就是说我们用自己的watcherListner()方法替换了bindProperty()默认的事件处理方法。
watcherListner()从cw.getValue()获取所监控属性或属性链的更新数据,并复制到目标对象(txtDest.text)上。一切都与绑定的默认行为一样。只不过我们埋下了一个圣诞彩蛋,如果txtSrc.text的值为"unbind"的时候,就利用cw.unwatch()解除绑定。
代码13-9:ChangeWatcher类的样例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="initBinding()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.binding.utils.*; private var cw:ChangeWatcher; private function initBinding():void{cw=BindingUtils.bindProperty(txtDest,"text",txtSrc,"text"); cw.setHandler(watcherListner);} private function watcherListner(event:Event):void{ if(txtSrc.text=="unbind"){ txtDest.text=cw.getValue().toString(); cw.unwatch();} else{ txtDest.text=cw.getValue().toString();}}]]></mx:Script> <mx:Form><mx:FormItem label="数据源"> <mx:TextInput id="txtSrc"/> </mx:FormItem> <mx:FormItem label="绑定目标"> <mx:TextInput id="txtDest"/> </mx:FormItem> </mx:Form> </mx:Application>
该样例的运行结果如图13-3所示,在"数据源"中输入unbind后,绑定关系就被解除了。
属性链
数据绑定中很重要的一环就是指定监听哪些数据源。Flex不仅可以监控单一的属性,也能够监控属性链。
在下面这个例子中,属性链为book.name,属性链中的任何一环发生变化,都会调度绑定的事件侦听器方法。
BindingUtils.bindProperty(txtDest,"text",,this,["book","name"]);
使用MXML也能够达到同样的目的:
<mx:Text id="txtDest" text="{book.name }"/>
案例
package { class Model { //i shall leave the constructor to you [Bindable] public var totalItems:Number; } } public function init():void{ //this is useful if you want to unwatch or stop detecting changes to this variable //ofcourse init function has to be called model = new Model(); watcherInstance = ChangeWatcher.watch(model,["totalItems"],itemsChanged); } public function itemsChanged(event:PropertyChangeEvent):void{ //this function is called as soon as value of totalItem changes. //if you want to stop watching this variable. watcherInstance.unwatch(); }
上一篇: 宋朝男人的时尚:在头上戴花