14.4.使用ActionScript来进行数据绑定

2024-04-27 13:52:18

字体：大中小

来源：转载

供稿：网友

14.4.1. 问题
我想去通过ActionScript 而不是MXML 来创建一个数据绑定。
14.4.2. 解决办法
使用类mx.utils.binding.BindingUtils 来创建mx.utils.binding.ChangeWatcher 对象。
14.4.3. 讨论
使用ActionScript 来创建数据绑定，当目标更新的时候，可以给你提供更多的可控性。为了使用ActionScript 创建一个数据绑定，使用类BindingUtils 来创建一个ChangeWatcher 对象。

BindingUtils 提供了两个静态方法，可用于创建数据绑定：bindProperty 和bindSetter。

使用方法bindProperty 和BindingUtils 和在MXML 中使用<mx:Binding>标记的效果是一致的。

不像使用<mx:Binding>标记一样，有可使用的属性，需要使用ActionScript 来进行声明，BindingUtils.bindProperty 的参数用于定义源和目标对象以及属性。如下：

-ActionScript

var watcher:ChangeWatcher = BindingUtils.bindProperty( destination, "property", source, "property" );

通过方法BindingUtils.bindSetter，你可以声明函数来处理数据绑定的源数据的更新事件。

-ActionScript

var watcher:ChangeWatcher = BindingUtils.bindSetter( invalidateProperty, source, "property" );
...
private function invalidateProperty( arg:* ):void
{
// perform any necessary operations.
}

当使用了静态方法bindProperty 和bindSetter 后，则没有必要定义变量ChangeWatcher 了。然而，有的时候你可能需要利用返回的ChangeWatcher 对象，因为通过该对象，则有可以更新数据源、目标属性以及停止数据绑定。

接下来的例子中，使用方法BindingUtils.bindProperty 在控件TextInput 和控件Text 间的text属性间进行了数据绑定：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initHandler();">
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
import mx.binding.utils.BindingUtils;
private var _nameWatcher:ChangeWatcher;
private function initHandler():void
{
_nameWatcher = BindingUtils.bindProperty( nameField, "text", nameInput, "text" );
}
private function clickHandler():void
{
if( _nameWatcher.isWatching() )
{
_nameWatcher.unwatch();
btn.label = "watch";
}
else
{
_nameWatcher.reset( nameInput );
btn.label = "unwatch";
}
}

]]>
</mx:Script>
<mx:Panel title="User Entry."
paddingLeft="5" paddingRight="5"
paddingTop="5" paddingBottom="5">
<mx:Form>
<mx:FormItem label="Name:">
<mx:TextInput id="nameInput" />
</mx:FormItem>
</mx:Form>
<mx:HRule width="100%" />
<mx:Label text="You Entered:" fontWeight="bold" />
<mx:HBox>
<mx:Label text="First Name:" />
<mx:Text id="nameField" />
</mx:HBox>
<mx:Button id="btn" label="unwatch"
click="clickHandler();" />
</mx:Panel>
</mx:Application>