ActionScript遍历绑定(BindProperty,BindSetter,ChangeWatcher)

[size=medium][b][color=darkred]注意: 为防止内存益处,记得调用watcherInstance.unwatch();[/color][/b][/size]

[size=medium]在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()解除绑定。[/size]


[size=medium]代码13-9:ChangeWatcher类的样例[/size]

<?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>


[size=medium]该样例的运行结果如图13-3所示,在"数据源"中输入unbind后,绑定关系就被解除了。

属性链

数据绑定中很重要的一环就是指定监听哪些数据源。Flex不仅可以监控单一的属性,也能够监控属性链。

在下面这个例子中,属性链为book.name,属性链中的任何一环发生变化,都会调度绑定的事件侦听器方法。
BindingUtils.bindProperty(txtDest,"text",,this,["book","name"]);

使用MXML也能够达到同样的目的:

<mx:Text id="txtDest" text="{book.name }"/>


案例[/size]
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();
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值