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!";
- }