Flex4.6_單向與雙向數據綁定使用Label與TextInput範例

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
3.   xmlns:s="library://ns.adobe.com/flex/spark" 
4.   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
5. <fx:Declarations>
6. <!-- Place non-visual elements (e.g., services, value objects) here -->
7. </fx:Declarations>
8. <s:layout>
9. <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
10. </s:layout>
11. <s:TextInput id="textInput1" text="{textInput2.text}" x="191" y="174"/>
12. <s:TextInput id="textInput2" text="{textInput1.text}" x="191" y="248"/>
13. <s:Label x="190" y="341" text="# chars:{textInput1.text.length}"/>
14. </s:Application>

每個TextInput組件的text屬性都被綁定使用 ({}語法) 到另一個TextInput 組件的text屬性上。

顯示結果:

  另一種做法也是一樣結果，textInput1組件的text 屬性擁有更為神奇的@{}語法，它意味著"把這個屬性雙向綁定"。

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
3.   xmlns:s="library://ns.adobe.com/flex/spark" 
4.   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
5. <fx:Declarations>
6. <!-- Place non-visual elements (e.g., services, value objects) here -->
7. </fx:Declarations>
8. <s:layout>
9. <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
10. </s:layout>
11. <s:TextInput id="textInput1" text="@{textInput2.text}" x="191" y="174"/>
12. <s:TextInput id="textInput2"  x="191" y="248"/>
13. <s:Label x="190" y="341" text="# chars:{textInput1.text.length}"/>
14. </s:Application>

顯示結果: