Flex中提供了[Bindable]标签,可以方便的实现数据绑定。但是其背后的原理是什么呢?可以用flash.utils.describeType这个工具来分析。
    假设有如下的类,对成员变量声明了数据绑定:

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


用flash.utils.describeType输出的xml如下:

Flex中的数据绑定(Data Binding)1:数据绑定的原理<type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true">
Flex中的数据绑定(Data Binding)1:数据绑定的原理  
<extendsClass type="Class"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理  
<extendsClass type="Object"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理  
<accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理  
<factory type="test::BindablePropertity">
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<extendsClass type="Object"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<implementsInterface type="flash.events::IEventDispatcher"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean">
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="1" type="String" optional="false"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
</method>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void">
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="1" type="String" optional="false"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="2" type="Function" optional="false"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="3" type="Boolean" optional="true"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
</method>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean">
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="1" type="String" optional="false"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
</method>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity">
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<metadata name="Bindable">
Flex中的数据绑定(Data Binding)1:数据绑定的原理        
<arg key="event" value="propertyChange"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
</metadata>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
</accessor>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void">
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="1" type="String" optional="false"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="2" type="Function" optional="false"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="3" type="Boolean" optional="true"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="4" type="int" optional="true"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="5" type="Boolean" optional="true"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
</method>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean">
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<parameter index="1" type="flash.events::Event" optional="false"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
</method>
Flex中的数据绑定(Data Binding)1:数据绑定的原理  
</factory>
Flex中的数据绑定(Data Binding)1:数据绑定的原理
</type>


可以看出,增加了[Bindable]声明后,相当于这个类实现了IEventDispatcher接口,并且在数据发生变化时会分发propertyChange事件。这样,其他监听了这一事件的组件就可以在数据变化时得到通知。
    Flex组件的属性大多可以用花括号“{}”进行绑定,也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析,可以看到:

Flex中的数据绑定(Data Binding)1:数据绑定的原理 <accessor name="btn1" access="readwrite" type="mx.controls::Button" declaredBy="FlexFramework">
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
<metadata name="Bindable">
Flex中的数据绑定(Data Binding)1:数据绑定的原理      
<arg key="event" value="propertyChange"/>
Flex中的数据绑定(Data Binding)1:数据绑定的原理    
</metadata>
Flex中的数据绑定(Data Binding)1:数据绑定的原理  
</accessor>

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

相关文章:

  • 2022-01-29
  • 2022-01-02
  • 2021-06-06
  • 2021-10-17
  • 2021-06-20
  • 2022-12-23
  • 2022-12-23
  • 2021-09-22
猜你喜欢
  • 2021-08-15
  • 2022-12-23
  • 2021-09-17
  • 2020-05-25
  • 2021-09-23
  • 2022-12-23
  • 2021-07-30
相关资源
相似解决方案