2010
08.11


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

flashBuilder-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上面所需要注意的小地方。


相關文章:
  • 由Flex 3進入Flex 4的必備知識 PART 7 – Flash Builder的Package編輯工具
  • 由Flex 3進入Flex 4的必備知識 PART 5 – Flex 4的新的CSS表示法
  • [分享]Flex 4 與 Flash CS5的 API表
  • 由Flex 3進入Flex 4的必備知識 PART 4 – Flash Builder的程式撰寫工具
  • Adobe Flex 4.1現身
  • 本文引用:
    文章內容由宋志峰[ANISTAR]撰寫,引用分享請以鏈結形式註明出處與原始作者。

    3 comments so far

    Add Your Comment
    1. 没有PART5啊

      • 還在撰寫列表中, 等過幾天有空時才有辦法慢慢補完, 這系列應該要到Part 9才算完成.

    2. 好强大 学习了!