Flex 数据绑定

Flex 数据绑定

<?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"
               height="662">
    <fx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.binding.utils.ChangeWatcher;
            [Bindable]
            private var str:String = "asdf";
            private var watcher1:ChangeWatcher;
            private var watcher2:ChangeWatcher;
            protected function button1_clickHandler(event:MouseEvent):void{
                str += 'a';
            }
            protected function btnBind01_clickHandler(event:MouseEvent):void{
                // bindProperty(目标对象，目标对象属性，源对象，源对象属性)
                watcher1 = BindingUtils.bindProperty(txt004,'text',txt005,'text');
            }
            
            protected function btnUnbind01_clickHandler(event:MouseEvent):void{
                watcher1.unwatch();
            }
            
            protected function btn004_clickHandler(event:MouseEvent):void{
                watcher2 = BindingUtils.bindProperty(txt010,'text',txt011,'text');
                // 不一定非要赋值给watcher
                BindingUtils.bindProperty(txt011,'text',txt010,'text');
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:Model id="person">
            <info>
                <name>
                    <first>John</first>
                    <last>Doe</last>
                    <full>{person.name.first}.{person.name.last}</full>
                </name>
                <email>a@b.c</email>
                <phone>1234567</phone>
            </info>
        </fx:Model>
    </fx:Declarations>
    <!-- fx:Binding必须为根的子元素 -->
    <fx:Binding destination="txt003.text" source="txt002.text"/>
    <fx:Binding destination="txt009.text" source="txt008.text" twoWay="true"/>
    <s:TextInput id="txt001" x="212" y="50"/>
    <s:TextInput x="212" y="100" enabled="false" text="绑定：{txt001.text}"/>
    <s:TextInput x="212" y="150" text="绑定到对象不好：{txt001}"/><!-- 这样绑定只会绑定其id -->
    <s:TextInput x="212" y="200" text="{str}"/>
    <s:Button x="352" y="201" label="绑定到变量中" click="button1_clickHandler(event)"/>
    <s:Label x="212" y="245" width="151" height="23" text="串联：{txt001.text} {txt001.text}'s &quot;ABC"/>
    <s:TextInput id="txt002" x="471" y="50" text="使用fx:Bingding进行绑定"/>
    <s:TextInput id="txt003" x="471" y="100"/>
    <s:Panel x="476" y="130" width="250" height="200" title="使用BindingUtils类创建绑定">
        <s:TextInput id="txt004" x="21" y="10" text="目标"/>
        <s:TextInput id="txt005" x="21" y="40" text="源"/>
        <s:Button id="btnBind01" x="21" y="87" label="绑定" click="btnBind01_clickHandler(event)"/>
        <s:Button id="btnUnbind01" x="113" y="87" label="解除" click="btnUnbind01_clickHandler(event)"/>
    </s:Panel>
    <s:Panel x="194" y="290" width="250" height="299" title="双向数据绑定三种方式">
        <s:TextInput id="txt006" x="10" y="19"/>
        <s:TextInput id="txt007" x="10" y="58" text="@{txt006.text}"/>
        <s:TextInput id="txt008" x="10" y="98"/>
        <s:TextInput id="txt009" x="10" y="132"/>
        <mx:HRule x="10" y="88" width="172"/>
        <mx:HRule x="10" y="162" width="172" height="1"/>
        <s:TextInput id="txt010" x="10" y="171"/>
        <s:TextInput id="txt011" x="10" y="201"/>
        <s:Button id="btn004" x="146" y="202" label="双向绑定" click="btn004_clickHandler(event)"/>
        <s:Label x="158" y="29" text="表达式方式"/>
        <s:Label x="158" y="108" text="fx:Binding"/>
        <s:Label x="158" y="182" text="BindingUtis"/>
    </s:Panel>
    <s:Panel x="476" y="389" width="250" height="200" title="数据模型和多级绑定">
        <s:TextInput x="10" y="27" text="@{person.name.first}"/>
        <s:Label x="10" y="92" text="{person.name.full}"/>
    </s:Panel>
</s:Application>