Flex 4双向数据绑定

双向数据
绑定是Flex新特性之一，而且相当实用。很多时候我需要将一个数据模型绑定到一个表单上，同时又希望表单的任何改变都能够反过来影响数据模型。借助双向数据绑定，只需要在同一代码
行处定义绑定，而并不需要其它额外的代码。

以下是双向数据绑定的两条语法定义

<s:TextInput id=”txt” text=”@{value}”/> 注意@字符，这个操作符是用来标识绑定的类型是双向绑定。

<fx:Binding destination=”txt.text” source=”value” twoWay=”true”/>注意 twoWay属性

然而，需要注意有时候它并不能像预期那样完成任务，让我们看一个例子：

<?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/halo" minWidth="1024" minHeight="768" creationComplete="init()">

    <fx:Script>

      <![CDATA[

          [Bindable]

         private var labelValue:String = "Hello World!";

          private function init():void {

            trace(labelValue);

            trace(txt.text);

          }

        ]]>

   </fx:Script>

     <s:TextInput id="txt" text="@{labelValue}"/>

</s:Application>

复制代码

设定一个字符类型的变量，为它赋值"Hello World"，这个变量是文本输入框文本的数据绑定源。你可以认为执行init()后会得到如下结果：

   1: Hello World!

   2: Hello World!

复制代码

事实上，输出为空！当我第一次运行代码时感到很困惑。然后我调用调试器去观察幕后程序
是如何运行的。

这是我发现的：

1.程序初始化

2.首先LabelValue变量被初始化，出发属性观察器（因为它被使用了绑定）

3.这时，文本输入域为空，绑定无法完成

4.接下来，初始化文本输入框

5.默认情况下，输入框的文本为空

6.因为文本输入框也是数据绑定的一部分（谨记此例中数据绑定是双向的），属性检查器执行并设置labelValue值为空

7.最后，程序完成创建过程，init()被执行，这时，变量和文本输入框的文本属性获得相同值，都为空

如果我希望代码按照预期的想法正常运行，我必须在creationComplete事件
或之后初始化labelValue变量：

private function init():void {

   labelValue = "Hello Wold!";

}