Flex中的数据绑定Bindable的原理

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

Js代码   收藏代码
  1. package test  
  2. {  
  3.     import mx.collections.ArrayCollection;  
  4.       
  5.     public class BindablePropertity  
  6.    {  
  7.         [Bindable]  
  8.         public var list:ArrayCollection = new ArrayCollection();  
  9.     }  
  10. }  


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

Xml代码   收藏代码
  1. <type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true">  
  2.   <extendsClass type="Class"/>  
  3.   <extendsClass type="Object"/>  
  4.   <accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>  
  5.   <factory type="test::BindablePropertity">  
  6.     <extendsClass type="Object"/>  
  7.     <implementsInterface type="flash.events::IEventDispatcher"/>  
  8.     <method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean">  
  9.       <parameter index="1" type="String" optional="false"/>  
  10.     </method>  
  11.     <method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void">  
  12.       <parameter index="1" type="String" optional="false"/>  
  13.       <parameter index="2" type="Function" optional="false"/>  
  14.       <parameter index="3" type="Boolean" optional="true"/>  
  15.     </method>  
  16.     <method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean">  
  17.       <parameter index="1" type="String" optional="false"/>  
  18.     </method>  
  19.     <accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity">  
  20.       <metadata name="Bindable">  
  21.         <arg key="event" value="propertyChange"/>  
  22.       </metadata>  
  23.     </accessor>  
  24.     <method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void">  
  25.       <parameter index="1" type="String" optional="false"/>  
  26.       <parameter index="2" type="Function" optional="false"/>  
  27.       <parameter index="3" type="Boolean" optional="true"/>  
  28.       <parameter index="4" type="int" optional="true"/>  
  29.       <parameter index="5" type="Boolean" optional="true"/>  
  30.     </method>  
  31.     <method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean">  
  32.       <parameter index="1" type="flash.events::Event" optional="false"/>  
  33.     </method>  
  34.   </factory>  
  35. </type>  


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

Xml代码   收藏代码
  1. <accessor name="btn1" access="readwrite" type="mx.controls::Button" declaredBy="FlexFramework">  
  2.     <metadata name="Bindable">  
  3.       <arg key="event" value="propertyChange"/>  
  4.     </metadata>  
  5.   </accessor>  



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

 

(转载请注明出处:[url=www.tswa.org]博彩通[/url][url=www.k5048.com]博彩网[/url]

你可能感兴趣的:(Flex,Bindable)