Flex 数据绑定

Flex 数据绑定是一种功能强大的机制，允许开发者将应用程序中的数据模型与用户界面元素之间建立关联，并实时保持数据同步的状态。下面是关于 Flex 数据绑定的详细介绍。

数据绑定表达式

Flex 数据绑定通过使用数据绑定表达式来建立数据模型和用户界面元素之间的关联。数据绑定表达式是一种特殊的语法，可以在应用程序中的任意表达式中使用。数据绑定表达式由花括号（“{}”）括起来，其中包含一个或多个数据绑定源。例如：

<!-- 绑定文本框的值到 data.firstName 属性 -->
<s:TextInput text="{data.firstName}" />

<!-- 绑定 data.selected 属性到复选框的 selected 属性 -->
<s:CheckBox selected="{data.selected}" />

<!-- 绑定按钮的可用状态到 data.isEnabled 属性 -->
<s:Button enabled="{data.isEnabled}" />

数据绑定表达式可以嵌套，并支持任意数量的数据绑定源。例如：

<!-- 将 data.firstName 属性连接到“Hello，{data.firstName}！”文本框的文本属性 -->
<s:Label text="Hello, {data.firstName}!" />

数据绑定源

Flex 数据绑定支持一个或多个数据绑定源，可以是对象、函数或表达式。以下是数据绑定源的类型：

• 对象属性：可以是公共或非公共属性，以“对象.属性名”形式引用。

• 函数：可以是任意函数，以“函数名()”形式引用。

• 表达式：可以是任意表达式，以括号括起来。

例如：

<!-- 绑定两个对象的属性 -->
<s:TextInput text="{user.address.city}" />

<!-- 绑定一个函数返回值 -->
<s:Label text="{getFormattedDate(user.timestamp)}" />

<!-- 使用复杂表达式 -->
<s:Label text="{(new Date()).getFullYear() - user.birthYear}" />

单向绑定

单向绑定是 Flex 数据绑定的最基本形式，它仅将数据源的值复制到目标属性上，并不反过来存储。如果数据源的值发生更改，则目标属性的值也会同步更新。

单向绑定可以用“{数据源}”语法表示，例如：

<!-- 单向绑定到文本框的“text”属性 -->
<s:TextInput text="{user.firstName}" />

<!-- 单向绑定到标签的“text”属性 -->
<s:Label text="{user.lastName}" />

双向绑定

双向绑定是 Flex 数据绑定的高级形式，它可以将目标属性的值反过来存储到数据源中，实现在用户输入后的实时更新数据模型。

双向绑定可以用“{数据源, 数据模式}”语法表示，其中数据模式为可选值“twoWay”或“default”（默认）。例如：

<!-- 绑定文本框的“text”属性到数据模型的“firstName”属性，实现双向绑定 -->
<s:TextInput text="{user.firstName, twoWay}" />

<!-- 绑定滑块的“value”属性到数据模型的“age”属性，实现双向绑定 -->
<s:HSlider value="{user.age, twoWay}" minimum="0" maximum="100" />

数组和集合绑定

Flex 数据绑定支持自动绑定数组和集合类型的数据，使得添加、删除和修改这些数据时，视图也可以及时更新。

对于数组类型的数据，可以使用“ArrayCollection”类进行包装，以支持自动绑定。例如：

<!-- 在 MXML 中创建 ArrayCollection -->
<mx:ArrayCollection id="users" source="{[ {name: 'Tom', age: 25}, {name: 'Jerry', age: 27} ]}"/>

<!-- 绑定数据列表到 ArrayCollection -->
<s:List dataProvider="{users}" />

<!-- 在脚本中添加新数据 -->
users.addItem({ name: 'Mike', age: 30});

对于集合类型的数据，可以使用“ICollectionView”接口进行包装，以支持自动绑定。例如：

<!-- 在脚本中创建集合 -->
var source:Array = [ {name: 'Tom', age: 25}, {name: 'Jerry', age: 27} ];
var collection:ArrayCollection = new ArrayCollection(source);
var view:ICollectionView = collection.createCursor();

<!-- 绑定数据列表到 ICollectionView -->
<s:List dataProvider="{view}" />

<!-- 在脚本中添加新数据 -->
collection.addItem({ name: 'Mike', age: 30});

自定义函数

Flex 数据绑定支持开发者通过自定义函数来实现更高级的数据绑定。这些自定义函数可以基于数据源的值动态计算出目标属性的值，或者反过来从目标属性的值计算出数据源的值。

例如，以下是一个自定义函数，将温度值从摄氏度转换为华氏度：

public function celsiusToFahrenheit(c:int):int {
    return c * 9/5 + 32;
}

函数可以在数据绑定表达式中直接使用，例如：

<!-- 这里“temp”是来源数据的属性，celsiusToFahrenheit 是自定义函数 -->
<s:Label text="{celsiusToFahrenheit(temp)} °F" />

总结

Flex 数据绑定是一种非常强大的机制，可以帮助开发者简化数据和用户界面元素之间的关联。通过灵活使用单向绑定、双向绑定、数组和集合绑定以及自定义函数，可以轻松构建出更加灵活和强大的数据绑定应用程序。