Flex4 用AS实现数据绑定

上一篇文章主要讲了Mxml中实现数据绑定的简单示例，此处将使用ActionScript来写一个数据绑定的示例。

一、准备一个Model。

package {
  public class TestObj {
    [Bindable]
    public var description:String;
    
    public function TestObj(description:String = "") {
      this.description = description;
    }
  }
}

二、测试单向数据绑定

1、新建一个Mxml来使用Model。

<?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">
<fx:Script>
<![CDATA[
  [Bindable]
  private var _testObj:TestObj = new TestObj("hello");
]]>
</fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
  </s:layout>
  <s:TextInput id="textInput1" text="{_testObj.description}"
    focusOut="_testObj.description = textInput1.text;"/>
  <s:TextInput id="textInput2" text="{_testObj.description}"
    focusOut="_testObj.description = textInput2.text;"/>
</s:Application>

将testObj的description属性绑定到textInput的text属性上。

两个textinput使用移除焦点事件给另外一个赋值。

三、测试双向绑定。

<?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">
<fx:Script>
<![CDATA[
  [Bindable]
	private var _testObj:TestObj = new TestObj("Hi");
]]>
</fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
  </s:layout>
  <s:TextInput id="textInput1" text="@{_testObj.description}"/>
  <s:TextInput id="textInput2" text="@{_testObj.description}"/>
</s:Application>