Flex 4.5中数据绑定的原理

发布时间：2020-12-15 01:11:12 所属栏目：百科来源：网络整理

导读：http://www.iyoya.com/2011/06/10/flex-data-binding-2.html Flex中数据绑定的实现是由事件驱动的，当作为数据来源的对象发生变化时会触发propertyChange事件，Flex会将新的对象的值复制给目标对象，从而达到数据同步更新的目的。我们这里将对实现as中对象

http://www.iyoya.com/2011/06/10/flex-data-binding-2.html

Flex中数据绑定的实现是由事件驱动的，当作为数据来源的对象发生变化时会触发propertyChange事件，Flex会将新的对象的值复制给目标对象，从而达到数据同步更新的目的。

我们这里将对实现as中对象绑定的方式来说明原理，可以绑定as中的属性、方法以及类。

1、当绑定属性时，只要在属性前面添加[Bindable]元数据标签，如下面的形式：

 
        [Bindable] 
       
        private 
         var 
         userName: 
        String 
        ; 
       
[Bindable] 
       
 userAge: 
        uint 
        ;

2、当绑定方法时，分为两种情况一种为getter/setter方法定义属性的绑定，另一种为普通方法的绑定。
getter/setter方法定义的属性绑定，应该在getter方法前添加[Bindable]元数据标签，如下面的形式：

 
        4 
      
        5 
      
        6 
      
        7 
      
        8 
      
        9 
      
        10 
      
        11 
      
      _userEmail: 
        ;
         ? 
       
public 
         function 
         get 
         userEmail(): 
        String 
       
{ 
       
        ???? 
        return 
         _userEmail; 
       
} 
       
 set 
         userEmail(value: 
        ): 
        void 
       
{ 
       
???? 
        _userEmail = value; 
       
}

普通方法的绑定，需要通过[Bindable]元数据标签将具体的事件绑定到方法，当事件发出后会更新（执行）与事件绑定的方法，下面为Adobe官网上提供的一个例子：

 
        11 
      
        12 
      
        13 
      
        14 
      
        15 
      
        16 
      
        17 
      
        18 
      
        19 
      
        20 
      
        21 
      
        22 
      
        23 
      
        24 
      
        25 
      
        26 
      
        27 
      
        28 
      
        29 
      
        30 
      
        31 
      
        32 
      
        33 
      
     <?xml version="1.0"?> 
        <!-- binding/ASFunction.mxml --> 
       
< 
        s:Application 
         xmlns:fx 
        "http://ns.adobe.com/mxml/2009" 
       
        ??????????????? 
        xmlns:s 
        "library://ns.adobe.com/flex/spark" 
       
xmlns:mx 
        "library://ns.adobe.com/flex/mx" 
        > 
       
???? 
        s:layout 
        > 
       
???????? 
        s:VerticalLayout 
        /> 
       
</ 
        > 
       
fx:Script 
        > 
       
???????? 
        <![CDATA[ 
       
???????????? 
        import flash.events.Event; 
       
[Bindable(event="myFlagChanged")] 
       
???????????????????????? 
        //这里我们是通过将具体的事件绑定到isEnabled方法,所以我们要在后触发这个事件. 
       
private function isEnabled():String { 
       
???????????????? 
        if (myFlag) 
       
???????????????????? 
        return 'true'; 
       
else 
       
return 'false'; 
       
} 
       
private var _myFlag:Boolean = false; 
       
public function set myFlag(value:Boolean):void { 
       
_myFlag = value; 
       
dispatchEvent(new Event("myFlagChanged")); 
       
} 
       
public function get myFlag():Boolean { 
       
return _myFlag; 
       
} 
       
]]> 
       
> 
       
s:TextArea 
         id 
        "myTA" 
         text 
        "{isEnabled()}" 
        /> 
       
s:Button 
         label 
        "Clear MyFlag" 
         click 
        "myFlag=false;" 
        /> 
       
"Set MyFlag" 
        "myFlag=true;" 
        /> 
       
s:Application 
        >

从这个例子中可以更清楚的认识到Flex数据绑定的原理是基于事件驱动的。这种将具体的事件与方法绑定的方式同样也适用于属性，如下面的例子：

 
        22 
        
     "1.0" 
         encoding"utf-8""http://ns.adobe.com/mxml/2009""library://ns.adobe.com/flex/spark" 
       
"library://ns.adobe.com/flex/mx" 
         minWidth 
        "955" 
         minHeight 
        "600" 
        > 
       
<![CDATA[ 
       
[Bindable(event="userChange")] 
       
//这里我们是通过将具体的事件绑定到userName变量,所以我们要在后触发这个事件. 
       
private var userName:String = "iYoya"; 
       
protected function btnClickHandler(event:MouseEvent):void 
       
{ 
       
userName = "iYoya Zhang"; 
       
//如果这里不发送这个事件将无法更新userName值到Label中. 
       
dispatchEvent(new Event("userChange")); 
       
} 
       
]]> 
       
> 
       
s:VGroup 
        > 
       
s:Label 
        "User Name: {userName}" 
        /> 
       
"Change Name" 
        "btnClickHandler(event)" 
        /> 
       
> 
       
>

3、当绑定类时，只要在类定义的代码前添加[Bindable]元数据标签，如下面的形式：

 
        8 
        
     package{ 
       
 class 
         MyClass 
       
         ? 
       
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!