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

    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中自己监听相应的事件并编写事件处理。
    下一篇将会介绍几个实际绑定的例子。
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值