Flex中提供了[Bindable]标签,可以方便的实现数据绑定。但是其背后的原理是什么呢?可以用flash.utils.describeType这个工具来分析。
假设有如下的类,对成员变量声明了数据绑定:
package test
{
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
>
可以看出,增加了[Bindable]声明后,相当于这个类实现了IEventDispatcher接口,并且在数据发生变化时会分发propertyChange事件。这样,其他监听了这一事件的组件就可以在数据变化时得到通知。
Flex组件的属性大多可以用花括号“{}”进行绑定,也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析,可以看到:
组件是通过监听propertyChange事件来更新数据的。但是前面的数据绑定声明并没有指定事件名称,这是因为[Bindable]是简化的写法,相当于[Bindable(event="propertyChange")]。这里的事件名称可以改变,但是Flex组件默认监听了名为propertyChange的事件,如果自己更改了事件名称,则必需在Flex中自己监听相应的事件并编写事件处理。
下一篇将会介绍几个实际绑定的例子。
假设有如下的类,对成员变量声明了数据绑定:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
用flash.utils.describeType输出的xml如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
可以看出,增加了[Bindable]声明后,相当于这个类实现了IEventDispatcher接口,并且在数据发生变化时会分发propertyChange事件。这样,其他监听了这一事件的组件就可以在数据变化时得到通知。
Flex组件的属性大多可以用花括号“{}”进行绑定,也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析,可以看到:
下一篇将会介绍几个实际绑定的例子。