Flex4 数据绑定简单示例

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

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

<?xml version="1.0" encoding="utf-8"?>

[html] view plaincopy
<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}"/><pre code_snippet_id="295706" snippet_file_name="blog_20140416_1_5927505" name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">     <s:Label text="输入字符长度: {textInputA.text.length}"/></span></pre></s:Application>  
<pre></pre>  
<p></p>  
<p>1、使用{}语法进行数据绑定；</p>  
<p>2、输入testInputA的时候能与拎一个同步，并且能同步显示输入字符串长度。</p>  
<p><br>  
</p>  
<p>二、双向数据绑定</p>  
<p></p><pre code_snippet_id="295706" snippet_file_name="blog_20140416_2_813502" name="code" class="html"><?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="<span style="font-family: Arial, Helvetica, sans-serif;">输入字符长度: </span>{textInputA.text.length}"/>  
</s:Application></pre><br>  
1、功能效果同单向数据绑定例子。<p></p>  
<p>2、此处语法变为“@{}”。</p>