关键字: 数据绑定
在使用Flex开发的过程中,数据绑定是一定会遇到的,这种技术简单,又有点好玩,重要的是它让开发变得简单了。
在Flex中,数据绑定的方式有这么三种:
- 直接在“{}”中填写绑定变量
- 使用<mx:Binding />标签绑定
- 使用ActionScript中的BindingUtils类绑定
示例1:
<
mx:TextInput
id
="inputUnit"
/>
< mx:Label text ="{inputUnit.text}" />
< mx:Label text ="{inputUnit.text}" />
示例1中的绑定方式即是第一种绑定方式,在“{}”中直接填写inputUnit.text,表示Label显示的内容和TextInput是关联的,它会随着TextInput的输入内容变化而变化。
示例2:
1
<
mx:TextInput
id
="inputUnit"
/>
2 < mx:Label id ="showUnit" />
3 < mx:Binding source ="inputUnit.text" destination ="showUnit.text" />
2 < mx:Label id ="showUnit" />
3 < mx:Binding source ="inputUnit.text" destination ="showUnit.text" />
示例2展示了第二种绑定方式,使用<mx:Binding />标签。
示例3:
代码
1
<
mx:Script
>
2 <![CDATA[
3
4 import mx.binding.utils.*;
5
6 private function initBind():void {
7
8 BindingUtils.bindProperty(showUnit, "text", inputUnit, "text");
9 }
10
11 ]]>
12 </ mx:Script >
13
14
15 < mx:TextInput id ="inputUnit" />
16 < mx:Label id ="showUnit" />
2 <![CDATA[
3
4 import mx.binding.utils.*;
5
6 private function initBind():void {
7
8 BindingUtils.bindProperty(showUnit, "text", inputUnit, "text");
9 }
10
11 ]]>
12 </ mx:Script >
13
14
15 < mx:TextInput id ="inputUnit" />
16 < mx:Label id ="showUnit" />
示例3使用第三种方式来绑定数据,在我们通过调用initBind()方法之后,绑定目的就达到了。