学步园

以下内容转载自

http://www.iyoya.com/2011/06/24/two-way-data-binding-problem.html

正文：

在flex4以前如果要实现双向数据绑定就必须为数据源和目录对象进行交互绑定，而flex4后实现了双向数据绑定新的快速方法，如下所示：

1、组件中绑定

<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:TextInput id="t1" text="@{t2.text}"/>
      <s:TextInput id="t2"/>
  </s:Application>

2、fx:Binding标签

<fx:Binding source="t1.text" destination="t2.text" twoWay="true"/> 

但是这个新的方法对于数据源与目标对象具有不同的类型的情况时会产生一个问题，即反向绑定中目标对象的值将无法正确的绑定到数据源对象中，如下面例子所示：

<?xml version="1.0"?>
<!-- binding/E4XInBindingTag.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"
               width="600" height="400">
    <fx:Script>
        <![CDATA[
            [Bindable]
            private var age:Number = 0;
        ]]>
    </fx:Script>
    <s:TextInput id="t1" text="@{age}"/>
</s:Application>

上面的双向绑定的例子中存在一个错误：“类型1067: String类型值的隐式强制指令的目标是非相关类型 Number”。目标对象的值无法正确的绑定到数据源对象中。
对于这个问题之前已经有人在Adobe的官网上提出过（见：http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding），看来这确实是一个问题。在回复中有两个人的方案可以解决这个问题，一种是通过重写数据绑定的组件类，另一种是通过事件自己更新值。第一种方法工作量较大，第二种方法看上去好象脱离主题了但实现确很灵活。下面为第二种方法实现的例子：

<?xml version="1.0"?>
<!-- binding/E4XInBindingTag.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"
               width="600" height="400">
    <fx:Script>
        <![CDATA[
            [Bindable]
            private var age:Number = 0;
        ]]>
    </fx:Script>
    <s:VGroup>
        <s:HGroup verticalAlign="middle">
            <s:Label text="Change Age Value"/>
            <s:NumericStepper maximum="100" id="ns" change="age=ns.value"/>
        </s:HGroup>
        <s:HGroup verticalAlign="middle">
            <s:Label text="Two Way Binding Age Value"/>
            <s:TextInput id="t1" text="{age}" change="age = Number(t1.text)"/>
        </s:HGroup>
        <s:HGroup verticalAlign="middle">
            <s:Button label="Output Current Age Value" click="{t2.text=String(age)}"/>
            <s:TextInput id="t2"/>
        </s:HGroup>
    </s:VGroup>
</s:Application>