Flex4 数据绑定简略示例

Flex4 数据绑定简单示例

数据绑定是Flex中比较独特的功能，强大并且易用。数据绑定分为单向数据绑定和双向数据绑定。

示例：使用两个文本输入框相互复制对方内容，使用一个Lable显示文本输入框中的字符串长度。

一、单向数据绑定

<?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/mx">
  <s:layout>
    <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
  </s:layout>
  <s:TextInput id="textInputA" text="{textInputB.text}"/>
  <s:TextInput id="textInputB" text="{textInputA.text}"/>
     <s:Label text="输入字符长度: {textInputA.text.length}"/>
</s:Application>


1、使用{}语法进行数据绑定；
2、输入testInputA的时候能与拎一个同步，并且能同步显示输入字符串长度。


二、双向数据绑定
<?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/mx">
  <s:layout>
    <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
  </s:layout>
  <s:TextInput id="textInputA" text="@{textInputB.text}"/>
  <s:TextInput id="textInputB"/>
  <s:Label text="输入字符长度: {textInputA.text.length}"/>
</s:Application>


1、功能效果同单向数据绑定例子。
2、此处语法变为“@{}”。