由Flex 3進入Flex 4的必備知識 PART 5 – Flex 4的雙向Data Binding

在Flex4中提供了一個比較有趣的功能，
他可以幫助使用者進行雙向的DataBinding這個動作，
在原廠的文件中他稱之為 Two Way Data Binding，
從字面上應該不難理解他的功用，
舉個例子來說，如下圖所示：

 

我們設計了兩個TextInput的輸入欄位，
當你希望下方的文字輸入欄可以同步顯示上方輸入欄的資料，
那麼你就可以這樣寫：

<s:TextInput id="source"/>
<s:TextInput id="destination" text="{this.source.text}"/>

但是如果你希望下方的輸入欄也能修改時同步回上方的輸入欄中，那麼在Flex3以前必須要寫兩次的DataBinding動作才能完成，而Flex4把這個工作簡化了，如下圖所示： 你若是希望可以完成雙向的資料連結，那你將可以這樣來完成你的工作：

<s:TextInput id="source"/>
<s:TextInput id="destination" text="@{this.source.text}"/>

或是這樣：

<fx:Binding source="this.source.text" destination="this.destination.text" twoWay="true"/>
<s:TextInput id="source"/>
<s:TextInput id="destination"/>

這樣是不是很簡單呢？
這也是從Flex3升級到Flex4上面所需要注意的小地方。