Flex 3快速入门: 处理数据 使用数据绑定

本文来自：http://www.airia.cn/FLEX_Directory/using_data_binding/

数据绑定是连接一个对象中数据到另一个对象的处理过程。它提供了在应用程序中传递数据的方便的途径。

Adobe Flex 3提供几个途径来指定数据绑定:

• 使用大括号({})语法。
• 使用在大括号中ActionScript表达式
• 在MXML中使用<mx:Binding>标签
• 在ActionScript中使用绑定

使用大括号({})语法。

数据绑定需要源属性，目标属性，触发事件。触发事件表名了合适需要从源向目标拷贝数据。下边的例子展示了一个Text控件获得Hslider控件值属性的数据。在大括号中的属性名是绑定表达式的源属性。当原属性的值发生变化，Flex复制源属性的当前值mySlider.value到目标属性，Text控件的text属性。

连接：要查看使用大括号语法更复杂的关于数据绑定的例子，查看Defining data models

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/DataBindingSimple/index.html"
    width="250" height="150"
>
    <mx:Panel
        title="Simple data binding"

        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
        horizontalAlign="center"

    >
        <mx:HSlider id="mySlider"/>
        <mx:Text text="{mySlider.value}"/>           
    </mx:Panel>

</mx:Application>

使用在大括号中ActionScript表达式

大括号中的绑定表达式能够被包含在ActionScript表达式中用来发回一个结果。例如你能够使用大括号语法用于下边类型的绑定：

• 在大括号中一个单独的可绑定属性
• 在大括号中使用字符串串联，其中报站一个可绑定的属性
• 在大括号中基于可绑定属性的计算
• 在大括号中使用条件运算来判断一个可绑定属性

下边的例子中这事了用户界面中使用了每一种类型的绑定表达式
 

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html"   
    width="420" height="350"
>
    <mx:Model id="myModel">

        <myModel>
            <!-- Perform simple property binding. -->
            <a>{nameInput.text}</a>
            <!-- Perform string concatenation. -->
            <b>This is {nameInput.text}</b>

            <!-- Perform a calculation. -->
            <c>{(Number(numberInput.text) as Number) * 6 / 7}</c>

            <!-- Perform a conditional operation using a ternary operator;
                the person object contains a Boolean variable called isMale. -->
            <d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d>
        </myModel>

    </mx:Model>

    <mx:Panel
        paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"

        width="100%" height="100%"
        title="Binding expressions"
    >
        <mx:Form>
            <mx:FormItem label="Last Name:">

                <mx:TextInput id="nameInput"/>
            </mx:FormItem>           
            <mx:FormItem label="Select sex:">
                <mx:RadioButton
                    id="isMale"
                    label="Male"
                    groupName="gender"

                    selected="true"
                />
                <mx:RadioButton
                    id="isFemale"
                    label="Female"
                    groupName="gender"

                />
            </mx:FormItem>
            <mx:FormItem label="Enter a number:">
            <mx:TextInput id="numberInput" text="0"/>

            </mx:FormItem>           
        </mx:Form>
       
        <mx:Text text="{'Simple binding: '+myModel.a}"/>
        <mx:Text text="{'String concatenation: '+myModel.b}"/>

        <mx:Text text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>       
        <mx:Text text="{'Conditional: '+myModel.d}"/>

    </mx:Panel>   
</mx:Application>

运行结果

在MXML中使用<mx:Binding>标签

可以使用<mx:Binding>标记作为大括号语法的大体方案。当你使用<mx:Binding>标记时，你需要将源属性赋给<mx:Binding>标记的source属性，并且目标属性赋给detination属性。这与使用大括号语法是等同的。

在一个MCV架构中，与大括号语法相比，使用<mx:Binding>标记完全的从Model中分离了View（用户界面）。在这个架构中，binging标记扮演了Controller。<mx:Binding>标记也使得不同的源属性可以绑定到相同的目标属性上，因为你可以使用多个<mx:Binding>标记指向同一个目标。

下边的例子中，通过<mx:Binding>标记，用户界面的控件属性被绑定在wormModel数据模型中。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/DataBindingBindingTag/index.html"
    width="400" height="200"
>

    <!-- Model: Worm data -->
    <mx:Model id="wormModel">
        <Worm>
            <length/>
        </Worm>
    </mx:Model>

    <!--
        View: User Interface controls.
    -->
    <mx:Panel
        title="Using the binding tag"
        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
        horizontalAlign="center"
    >
        <mx:Form>
            <mx:FormItem label="Length of worm:">
                <mx:HSlider id="mySlider"/>
            </mx:FormItem>
        </mx:Form>
        <mx:Text id="statusText"/>           
    </mx:Panel>  

    <!--
        Controller: Properties of user interface controls are bound
        to the data model using <mx:Binding> tags.
    -->

    <mx:Binding
        source="mySlider.value"
        destination="wormModel.length"
    />
    <mx:Binding
        source="wormModel.length"
        destination="statusText.text"
    />
</mx:Application>

 

注意： <mx:Binding>标记的source属性能够包含大括号。当包含大括号，source属性的值被作为一个单独的ActionScript表达式来处理。当有大括号在source属性中时，它的值被当作关联的ActionScript表达式来处理，下边的表达式都是有效的。

<mx:Binding
        source="'The worm is ' + wormModel.length + 'cm long.'"
        destination="statusText.text"
    />

<mx:Binding
        source="{'The worm is ' + wormModel.length + 'cm long.'}"
        destination="statusText.text"
    />

<mx:Binding
        source="'The worm is ' + {wormModel.length} + 'cm long.'"
        destination="statusText.text"
    />

在ActionScript中使用绑定

一般在MXML中使用大括号({})或<mx:Binding>标记来定义数据绑定。你也可以在ActionScript中定义数据绑定，通过使用mx.binding.utils.BindingUtils类来实现。这个类的静态方法bindProperty()方法使你创建一个基于变量的绑定，bindSetter()方法显示一个基于setter方法的绑定。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/DataBindingActionScript/index.html"
    width="400" height="200"
    initialize="initializeHandler();"
>

    <!--
        Controller: Properties of user interface controls are bound
        to the data model using ActionScript.
    -->

    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;           
            private function initializeHandler():void
            {
                // Updates the model
                BindingUtils.bindProperty(wormModel, "length", mySlider, "value");
               
                // Reads from the model to update the status text
                BindingUtils.bindProperty(statusText, "text", wormModel, "length");
            }
        ]]>
    </mx:Script>

    <!-- Model: Worm data -->
    <mx:Model id="wormModel">
        <Worm>
            <length/>
        </Worm>
    </mx:Model>

    <!--
        View: User Interface controls.
    -->

    <mx:Panel
        title="Using the binding tag"
        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
        horizontalAlign="center"
    >
        <mx:Form>
            <mx:FormItem label="Length of worm:">
                <mx:HSlider id="mySlider"/>
            </mx:FormItem>
        </mx:Form>
        <mx:Text id="statusText"/>           
    </mx:Panel>   
</mx:Application>