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>