Flex中提供了[Bindable]标签,可以方便的实现数据绑定。但是其背后的原理是什么呢?可以用flash.utils.describeType这个工具来分析。
假设有如下的类,对成员变量声明了数据绑定:
用flash.utils.describeType输出的xml如下:
可以看出,增加了[Bindable]声明后,相当于这个类实现了IEventDispatcher接口,并且在数据发生变化时会分发propertyChange事件。这样,其他监听了这一事件的组件就可以在数据变化时得到通知。
Flex组件的属性大多可以用花括号“{}”进行绑定,也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析,可以看到:
组件是通过监听propertyChange事件来更新数据的。但是前面的数据绑定声明并没有指定事件名称,这是因为[Bindable]是简化的写法,相当于[Bindable(event="propertyChange")]。这里的事件名称可以改变,但是Flex组件默认监听了名为propertyChange的事件,如果自己更改了事件名称,则必需在Flex中自己监听相应的事件并编写事件处理。
下一篇将会介绍几个实际绑定的例子。
假设有如下的类,对成员变量声明了数据绑定:
package test
{
import mx.collections.ArrayCollection;
public class BindablePropertity
{
[Bindable]
public var list:ArrayCollection = new ArrayCollection();
}
}
{
import mx.collections.ArrayCollection;
public class BindablePropertity
{
[Bindable]
public var list:ArrayCollection = new ArrayCollection();
}
}
用flash.utils.describeType输出的xml如下:
<
type
name
="test::BindablePropertity"
base
="Class"
isDynamic
="true"
isFinal
="true"
isStatic
="true"
>
< extendsClass type ="Class" />
< extendsClass type ="Object" />
< accessor name ="prototype" access ="readonly" type ="*" declaredBy ="Class" />
< factory type ="test::BindablePropertity" >
< extendsClass type ="Object" />
< implementsInterface type ="flash.events::IEventDispatcher"/>
< method name ="hasEventListener" declaredBy ="test::BindablePropertity" returnType ="Boolean" >
< parameter index ="1" type ="String" optional ="false" />
</ method >
< method name ="removeEventListener" declaredBy ="test::BindablePropertity" returnType ="void" >
< parameter index ="1" type ="String" optional ="false" />
< parameter index ="2" type ="Function" optional ="false" />
< parameter index ="3" type ="Boolean" optional ="true" />
</ method >
< method name ="willTrigger" declaredBy ="test::BindablePropertity" returnType ="Boolean" >
< parameter index ="1" type ="String" optional ="false" />
</ method >
< accessor name ="list" access ="readwrite" type ="mx.collections::ArrayCollection" declaredBy ="test::BindablePropertity" >
< metadata name ="Bindable" >
< arg key ="event" value ="propertyChange" />
</ metadata >
</ accessor >
< method name ="addEventListener" declaredBy ="test::BindablePropertity" returnType ="void" >
< parameter index ="1" type ="String" optional ="false" />
< parameter index ="2" type ="Function" optional ="false" />
< parameter index ="3" type ="Boolean" optional ="true" />
< parameter index ="4" type ="int" optional ="true" />
< parameter index ="5" type ="Boolean" optional ="true" />
</ method >
< method name ="dispatchEvent" declaredBy ="test::BindablePropertity" returnType ="Boolean" >
< parameter index ="1" type ="flash.events::Event" optional ="false" />
</ method >
</ factory >
</ type >
< extendsClass type ="Class" />
< extendsClass type ="Object" />
< accessor name ="prototype" access ="readonly" type ="*" declaredBy ="Class" />
< factory type ="test::BindablePropertity" >
< extendsClass type ="Object" />
< implementsInterface type ="flash.events::IEventDispatcher"/>
< method name ="hasEventListener" declaredBy ="test::BindablePropertity" returnType ="Boolean" >
< parameter index ="1" type ="String" optional ="false" />
</ method >
< method name ="removeEventListener" declaredBy ="test::BindablePropertity" returnType ="void" >
< parameter index ="1" type ="String" optional ="false" />
< parameter index ="2" type ="Function" optional ="false" />
< parameter index ="3" type ="Boolean" optional ="true" />
</ method >
< method name ="willTrigger" declaredBy ="test::BindablePropertity" returnType ="Boolean" >
< parameter index ="1" type ="String" optional ="false" />
</ method >
< accessor name ="list" access ="readwrite" type ="mx.collections::ArrayCollection" declaredBy ="test::BindablePropertity" >
< metadata name ="Bindable" >
< arg key ="event" value ="propertyChange" />
</ metadata >
</ accessor >
< method name ="addEventListener" declaredBy ="test::BindablePropertity" returnType ="void" >
< parameter index ="1" type ="String" optional ="false" />
< parameter index ="2" type ="Function" optional ="false" />
< parameter index ="3" type ="Boolean" optional ="true" />
< parameter index ="4" type ="int" optional ="true" />
< parameter index ="5" type ="Boolean" optional ="true" />
</ method >
< method name ="dispatchEvent" declaredBy ="test::BindablePropertity" returnType ="Boolean" >
< parameter index ="1" type ="flash.events::Event" optional ="false" />
</ method >
</ factory >
</ type >
可以看出,增加了[Bindable]声明后,相当于这个类实现了IEventDispatcher接口,并且在数据发生变化时会分发propertyChange事件。这样,其他监听了这一事件的组件就可以在数据变化时得到通知。
Flex组件的属性大多可以用花括号“{}”进行绑定,也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析,可以看到:
下一篇将会介绍几个实际绑定的例子。