Flex中的数据绑定(Data Binding)1:数据绑定的原理

最新推荐文章于 2026-06-02 09:34:07 发布

转载最新推荐文章于 2026-06-02 09:34:07 发布 · 2.2k 阅读

标签

#flex #binding #编译器 #xml #function

AS 专栏收录该内容

33 篇文章

订阅专栏

本文深入探讨了Flex组件中数据绑定的原理及实现方式，解释了如何通过[Bindable]标签简化数据绑定过程，并详细说明了Flex组件在数据变化时如何触发propertyChange事件，以及如何在组件间实现数据的双向绑定。

http://zhidao.baidu.com/question/80156523.html
[Bindable]public class TextAreaFontControl extends TextArea {}flex编译器自动创建一个事件名叫propertyChange用于所有的公有属性，这些属性可以作为绑定表达式的源。这种定义等同于[Bindable(event="propertyChange")]

http://www.cnblogs.com/jiayuan/archive/2010/01/04/1638797.html 此文1描述了如何实现。

但是实际使用中发现类不是extend EventDispatcher 也可以设置属性为Bindable，那是怎么发事件的？

下文描述了内部机制，dynamic的加了函数，和xml的那些接口类似，使用中不会自动补全函数，

            protected function group1_creationCompleteHandler(event:FlexEvent):void
           {
               nd.addEventListener("propertyChange", onEvent);
           }

http://blog.csdn.net/thinkinside/article/details/1880058

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进行分析，可以看到：

< accessor name ="btn1" access ="readwrite" type ="mx.controls::Button" declaredBy ="FlexFramework" >

< metadata name ="Bindable" >

< arg key ="event" value ="propertyChange" />

</ metadata >

</ accessor >

组件是通过监听propertyChange事件来更新数据的。但是前面的数据绑定声明并没有指定事件名称，这是因为[Bindable]是简化的写法，相当于[Bindable(event="propertyChange")]。这里的事件名称可以改变，但是Flex组件默认监听了名为propertyChange的事件，如果自己更改了事件名称，则必需在Flex中自己监听相应的事件并编写事件处理。