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

2023-07-22 12:39:06

字体：大中小

来源：转载

供稿：网友

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>

使用方法BindingUtils.bindProperty 时，数据绑定是在一个源和目标间进行一对一的绑定。在这个例子中，使用TextInput 制件实例中的text 属性进行更新时，同步也更新了Text 控件实例。数据绑定的生命周期停止和重围，可以通过Button 实例中的操作，来设置ChangeWatcher实现。

更新一个或者多个目标绑定的数据时，可以如下面展示的一样使用BindingUtils.bindSetter 来声明一个函数来做为数据绑定的引导：

-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.bindSetter( invalidateName,nameInput, "text" );
}
private function invalidateName( arg:* ):void
{
if( btn.label == "unwatch" )
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>

任意数据的更新通过BindingUtils.bindSetter 做为参数传递从而来实现。Setter 方法做为事件的处理者，当目标值更改时通知它来进行处理。在这个例子中，text 的值是根据Button 实例的label 值来进行更新的。

nameInput 控件的text 属性更新时，invalidateName 方法也会被调用，对于目标数据的更新则是当前活动ChangeWatcher 来处理。

注释：
为了适应Flash Player 的垃圾收集，任何在一个实例中创建的ChangeWatcher 对象是设置为unwatch 的数据绑定语句，这一点是很重要的。当创建一个ChangeWatcher 对象时，就是上一个例子中使用BindingUtils 类一样，在内存中会对进行绑定的源和目标都会保存一个引用。

为了从内存中释放这些引用和标记这些对象，以便于垃圾收集器能正确的进行释放，它们需要使用unwatch 方法来进行移除。

上一篇：17.4.从共享对象中读取数据

下一篇：14.5.链式的属性绑定