欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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类的样例
<?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();
}