Flex 绑定/双向绑定

1.什么是数据绑定？

   Data binding is the process of tying the data in one object to another object.

   数据绑定是一个对象的数据捆绑到另一个对象上的进程。

2.数据绑定的作用

   It provides a convenient way to pass data between the different layers of the application.

   数据绑定提供了一个在程序的各个层面之间传递数据的便利方法

3.数据绑定的机制

   Data binding requires a source property, a destination property, and a triggering
event that indicates when to copy the data from the source to the destination. An
object dispatches the triggering event when the source property changes.

   数据绑定要求一个源属性，一个目的属性和一个触发事件。这个触发事件指示从源属性复制数据到目的属性上。当源属性改变时一个对象派发这个触发事件。

4.数据绑定的定义方式

   1）句法：大括号{}

   2）MXML标签：<mx:Binding>

   3）AS类： mx.binding.utils.BindingUtils

5.数据绑定的发生时机

   1) The binding source dispatches an event because the source has been modified.

       绑定源改变后派发事件

       This event can occur at any time during application execution.

        这个事件在程序运行的任何时间都可发生。

    2）At application startup when the source object dispatches the initialize event.

         程序启动时源对象派发初始化事件

         All data bindings are triggered once at application startup to initialize the

         所有的数据绑定在程序启动初始化目的属性时都会被触发一次。

6.绑定属性

1）Using data binding with data models

       绑定数据model

   2)  Binding a source property to more than one destination property

        一对多绑定

   3）Binding more than one source property to a destination property

        多对一绑定

   4）Defining bidirectional bindings

        双向绑定

        eg:

7.绑定函数

1）Using functions that take bindable properties as arguments

    2)  Binding to functions in response to a data-binding event

8.绑定对象

1)  Binding to Objects

     2)  Binding to properties of Objects

          绑定对象的属性，可使用元素标签[Bindable]在对象所在的类的定义前。则这个对象的所有

公有属性都被绑定。

9.绑定数组

1)  Binding to arrays

     2)  Binding to array elements

10.绑定元素标签

句法：[Bindable] 或 [Bindable(event="eventname")]

[Bindable]是[Bindable(event="propertyChange")]的简写。当被绑定的属性发生改变时，Flex

会派发事件触发绑定。

主要有三种使用情况：

1) 在属性定义前 2） 类定义前 3）getter 或 setter 方法前



可以使用MX标签绑定，也可以使用BindUtil来进行绑定，下面是我做的一个例子，实现BO与页面空间的自动双向绑定：

BO定义:


package com.bankcomm.icms.domain.migrate

{

    [Bindable]

    public class Bo {

        private var _property0:String = "";

        private var _property1:int = 0;

        private var _property2:String = "";

       

        public var className:String = "Bo";

        public var propertyNames:Array = ["property0", "property1", "property2"];

        public function Bo() {}

       



        public function set property0(value:String):void{

            this._property0 = value;

        }



        public function get property0():String{

            return this._property0;

        }



        public function set property1(value:int):void{

            this._property1 = value;

        }

       

        public function get property1():int{

            return this._property1;

        }



        public function set property2(value:String):void{

            this._property2 = value;

        }

       

        public function get property2():String{

            return this._property2;

        }       

    }

}




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">

    <mx:Script>

        <![CDATA[

            import com.bankcomm.icms.domain.migrate.Bo;

            import com.bankcomm.icms.common.DataDict;

            import mx.binding.utils.BindingUtils;

            import mx.collections.ArrayCollection;

           

            private var bo:Bo = new Bo();

           

            function init():void {

                autowireBindObject(bo);

            }

           

            function autowireBindCollection(arr:ArrayCollection):void {

               

            }

           

            function autowireBindObject(bo:Object) {

                for each(var propertyName:String in bo.propertyNames) {

                    var elem:Object = this[bo.className + "_" + propertyName];

                    if(elem==null) continue;           

                    var value = bo[propertyName];

                   

                    if(elem instanceof ComboBox) {

                        ComboBox(elem).dataProvider = DataDict.dictYesNo;

                        BindingUtils.bindProperty(elem, "selectedIndex", bo, propertyName, false);

                        BindingUtils.bindProperty(bo, propertyName, ComboBox(elem), "selectedIndex",false);

                    } else if(elem instanceof TextInput) {

                        BindingUtils.bindProperty(elem, "text", bo, propertyName, false);

                        BindingUtils.bindProperty(bo, propertyName, TextInput(elem), "text", false);

                    } else if(elem instanceof DateField) {

                        BindingUtils.bindProperty(elem, "text", bo, propertyName, false);

                        BindingUtils.bindProperty(bo, propertyName, DateField(elem), "text", false);

                    } else {

                       

                    }

                }

            }

           

            function chageModelAndUpdateUI() {

                bo.property0 = "xxx";

                bo.property1 = 1;

                bo.property2 = "2009-02-10";

            }

           

            function chageUIAndUpdateModel():void {

                var a = bo.property1;

            }

           

        ]]>

    </mx:Script>

   

    <mx:TextInput id="Bo_property0" x="65" y="10"/>

    <mx:ComboBox id="Bo_property1" x="65" y="51" width="160"/>

    <mx:DateField id="Bo_property2" x="65" y="92" width="160"/>

   

    <mx:Button x="65" y="133" label="模型改变更新UI" click="chageModelAndUpdateUI();" />

   

    <mx:Button x="179" y="133" label="UI改变更新模型" click="chageUIAndUpdateModel();" />

   

   

   

</mx:Application>