关于数据绑定（译自Flex帮助）

数据绑定是将一个对象中的数据同另一个对象中的数据联系在一起的过程。数据绑定为在应用的不同层之间传递数据提供了便捷方法。数据绑定需要一个源属性，一个目的属性，以及用于表明何时将数据从源属性拷贝到目的属性的触发事件。当源属性变化时，对象发出触发事件。

Adobe Flex提供三种方法用于指定数据绑定：MXML中的大括号({})语法，MXML中的<mx:Binding>标记，以及ActionScript中的BindingUtils的系列方法。下面的例子使用大括号({})语法来展示一个Text控件，该控件的数据来自于TextInput控件Text属性：

<?xml version="1.0"?>

<!-- binding/BasicBinding.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TextInput id="myTI" text="Enter text here"/>

    <mx:Text id="myText" text="{myTI.text}"/>

</mx:Application>

大括号中所括的属性名就是绑定表达式中的源属性。当源属性的值放生变化时，Flex把源属性myTI.text的当前值拷贝到目的属性

   数据绑定表达式中可以将ActionScript代码以及E4X表达式作为一部分包含进来，如下例所示：

<?xml version="1.0"?>

<!-- binding/BasicBindingWithAS.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TextInput id="myTI"/>

    <mx:Text id="myText" text="{myTI.text.toUpperCase()}"/>

</mx:Application>

在这个例子中，当Flex将源属性的数据拷贝到目的属性时，使用ActionScript的String.toUpperCase()方法将源属性中的文本转化为大写形式。关于更多的信息参看：在数据绑定中使用ActionScript以及在数据绑定中使用E4X表达式。

     可以用<mx:Binding>标记作为大括号语法的替代方法。在使用<mx:Binding>时，要为<mx:Binding>标记提供一个源属性作为标记的source属性以及提供一个目的属性作为标记的destination属性。下面的例子使用<mx:Binding>标记定义了一个从TextInput控件到Text控件的数据绑定：

<?xml version="1.0"?>

<!-- binding/BasicBindingMXML.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TextInput id="myTI"/>

    <mx:Text id="myText"/>  

    <mx:Binding source="myTI.text" destination="myText.text"/>

</mx:Application>

     同大括号语法相比，用<mx:Binding>标记能够将视图（用户界面）同模型完全分离。<mx:Binding>标记也能实现将多个源属性绑定到一个相同的目的属性，这是因为能够定义多个具有相同的destination属性的<mx:Binding>标记。例子请参照“绑定多个源属性到一个目的属性”。

　　大括号语法和<mx:Binding>标记都能在编译期定义数据绑定，而使用ActionScript代码则可以在运行期定义数据绑定，如下例所示：

<?xml version="1.0"?>

<!-- binding/BasicBindingAS.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   

    <mx:Script>

      <![CDATA[

        import mx.binding.utils.*;

 

        // Define data binding.

        public function initBindingHandler():void {

            BindingUtils.bindProperty(myText, "text", myTI, "text");

        }

      ]]>   

    </mx:Script>

 

    <mx:TextInput id="myTI"/>

    <mx:Text id="myText" preinitialize="initBindingHandler();"/>

</mx:Application>

 

在这个例子中，使用静态方法BindingUtils.bindProperty()来定义数据绑定，也可以使用BindingUtils.bindSetter()方法定义一个到函数的绑定。有关更多的信息，参见“在ActionScript定义数据绑定”。

注意，在这个例中使用preinitialize事件去定义数据绑定。这是必须的，因为Flex在应用启动过程中，当源对象发出initialize事件时触发所有的数据绑定，有关更详细的信息参照“数据绑定何时发生”。

数据绑定何时发生？

数据绑定发生在以下情况：

<!--[if !supportLists]-->1.   <!--[endif]-->由于源已经被改变，数据绑定源发出一个事件，这个事件可以在应用执行的任何时间发出。这个事件触发Flex将源属性的值拷贝到目的属性。

<!--[if !supportLists]-->2.   <!--[endif]-->在应用启动过程中，当源对象发出initialize事件时，所有数据绑定都被一次性地被触发以初始化目的属性。

　　要想监控数据绑定，可以定义一个绑定观察者在数据绑定发生时触发事件处理器。更多信息请参照“定义绑定观察者”。
UIComponent类的executeBindings()方法执行该UIComponent作为目的对象上的所有绑定。所有的容器和控件，以及Repeater组件都从UIComponent类继承。容器和Repeater类的executeChildBindings()方法执行其中作为目的对象的子对象上的所有绑定。所有的容器都从Container类继承。

　　这些方法在期望的绑定没有发生时提供了一种执行绑定的方法。通过增加一条代码，比如对executeChildBindings()方法的调用，就可以在完成一个变化而没有使绑定执行的时候来更新用户界面。但是只有在确保绑定没有自动发生时才能使用executeBindings()方法。

支持数据绑定的属性

　　　可以把对象的所有属性都作为数据绑定表达式的目的属性，但要想使一个属性成为数据绑定表达式的源，那么源对象必须被实现为支持数据绑定。这意味着这个对象在属性值发生变化时要发出一个事件以触发绑定。在本文中，可以被用来作为数据绑定源的属性被称为“可绑定的(bindable)”属性。

　　在Adobe Flex Language Reference中，可以被当作绑定表达式的源的属性包括以下的描述语句：

"This property can be used as the source for data binding."

关于创建可以被用数据绑定表达式源的属性的更多信息参见“创建用作数据绑定源的属性”。

使用只读属性作为数据绑定源

　　通过定义一个只有getter方法而没有setter方法来定义个一个只读属性作为数据绑定表达式的源时，Flex只在应用启动时执行一次数据绑定。

使用静态属性作为数据绑定源

　　可以自动用一个静态常量作为数据绑定表达式的源。Flex只在应用启动时执行一次数据绑定。

创建用作数据绑定源的属性

　　当创建一个用于绑定表达式源的属性，那么在源属性值发生变化时Flex就能自动将值拷贝到所有的目的属性。为了让Flex执行拷贝，必须使用[Bindable]标记来向Flex注册这个属性。

The [Bindable] 元数据标记有以下语法:

[Bindable]

[Bindable(event="eventname")]

 

　　如果忽略了事件名称，Flex自动地创建一个名为propertyChange的事件，并且在属性发生变化时，由Flex发出这个事件以触发所有以这个属性作为源的数据绑定。

　　如果你指定了事件名称，那么在源属性发生变化时你就要自己负责发出这个事件。关于更多有关[Bindable]元数据标记的信息和例子参见“使用Bindable元数据标记”。下面的例子作了一个maxFontSize属性和一个minFontSize属性变量可用于数据绑定表达式的源：

<?xml version="1.0"?>

<!-- binding/FontPropertyBinding.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   

    <mx:Script>

        <![CDATA[

            // Define public vars for tracking font size.

            [Bindable]

            public var maxFontSize:Number = 15;

 

            [Bindable]

            public var minFontSize:Number = 5;

        ]]>   

    </mx:Script>

   

    <mx:Text text="{maxFontSize}"/>

    <mx:Text text="{minFontSize}"/>

 

    <mx:Button click="maxFontSize=20; minFontSize=10;"/>

</mx:Application>

 

　　当点击Button按钮，就会更新maxFontSize和minFontSize属性，并且触发了数据绑定去更新文本控件。

注意：如果忽略的[Bindable]元数据标记，Flex编译器会发出一个警告语句来说明绑定机制没有检查那个属性的变化。
数据绑定的用途：

数据绑定通常包括以下用途：

<!--[if !supportLists]-->§  <!--[endif]-->将用户界面上的控件属性绑定到另外一个用界面控件上。

<!--[if !supportLists]-->§  <!--[endif]-->将用户界面上的控件属性绑定到中间层的数据模型，以及将那个数据模型上域（field）绑定到数据服务请求上(一个三层系统)

<!--[if !supportLists]-->§  <!--[endif]-->将用户界面上的控件属性绑定到数据服务请求。

<!--[if !supportLists]-->§  <!--[endif]-->将数据服务请求结果绑定到用户界面控件的属性上。

<!--[if !supportLists]-->§  <!--[endif]-->将数据请求服务结果绑定到一个中间层数据模型上，以及将数据模型的域绑定到用户界面上。更多有关数据模型的信息见“Storing Data”

<!--[if !supportLists]-->§  <!--[endif]-->将ArrayCollection 或者XMLListCollection对象绑定到基于列表（List-based）的控件的dataProvider属性上。

<!--[if !supportLists]-->§  <!--[endif]-->将复杂属性的一个单独部分绑定到用户界面控件上。一个例子就是“主－从”式的场景，在这个场景中，点击列表控件的一个条目，就在其它几个控件中显示数据。

<!--[if !supportLists]-->§  <!--[endif]-->通过在绑定表达式中使用ECMAScript for XML (E4X)表达式将XML数据绑定到用户界面的控件上。

　　尽管数据绑定是一个非常强大的机制，但它不适合所有的情况。比如，有一个很复杂的用户界面，这个界面的某个部分必须按照严格的先后次序来更新，这种情下，更适合使用一个按次序赋值的方法。另外，绑定在每次属性发生变化时执行，如果程序中只在某些特定的时候才需要被告知属性变化，那么使用绑定机制并不是最佳方案。

分享到：

KTooltip 工具提示组件 | Adobe Cairngorm,Flex框架技术实践总结

• 2008-06-14 13:42
• 浏览 2556
• 评论(1)
• 查看更多

评论

1 楼 steven186 2008-10-16  

非常好啊，十分感谢你的分享。