Flex 4.5中数据绑定的原理

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

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

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

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

1 2 3 4

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

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

1 2 3 4 5 6 7 8 9 10 11

private var _userEmail: String ;   [Bindable] public function get userEmail(): String {      return _userEmail; } public function set userEmail(value: String ): void {      _userEmail = value; }

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

1 2 3 4 5 6 7 8 9 10 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 />      </ s:layout >      < 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;              }          ]]>      </ fx:Script >      < s:TextArea id = "myTA" text = "{isEnabled()}" />      < s:Button label = "Clear MyFlag" click = "myFlag=false;" />      < s:Button label = "Set MyFlag" click = "myFlag=true;" /> </ s:Application >

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<? xml version = "1.0" encoding = "utf-8" ?> < 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" minWidth = "955" minHeight = "600" >      < fx:Script >          <![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"));              }          ]]>      </ fx:Script >      < s:VGroup >          < s:Label text = "User Name: {userName}" />          < s:Button label = "Change Name" click = "btnClickHandler(event)" />      </ s:VGroup > </ s:Application >

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

1 2 3 4 5 6 7 8

package {      [Bindable]      public class MyClass      {        } }