Flex 4双向数据绑定

Flex 4双向数据绑定

 

双向数据 绑定是Flex新特性之一,而且相当实用。很多时候我需要将一个数据模型绑定到一个表单上,同时又希望表单的任何改变都能够反过来影响数据模型。借助双向数据绑定,只需要在同一代码 行处定义绑定,而并不需要其它额外的代码。



以下是双向数据绑定的两条语法定义

<s:TextInput id=”txt” text=”@{value}”/> 注意@字符,这个操作符是用来标识绑定的类型是双向绑定。

<fx:Binding destination=”txt.text” source=”value” twoWay=”true”/>注意 twoWay属性

然而,需要注意有时候它并不能像预期那样完成任务,让我们看一个例子:





  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex /spark"
  3.   xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" creationComplete="init()">
  4.     <fx:Script>
  5.       <![CDATA[
  6.           [Bindable]
  7.          private var labelValue:String = "Hello World!";
  8.           private function init():void {
  9.             trace(labelValue);
  10.             trace(txt.text);
  11.           }
  12.         ]]>
  13.    </fx:Script>
  14.      <s:TextInput id="txt" text="@{labelValue}"/>
  15. </s:Application>


复制代码

设定一个字符类型的变量,为它赋值"Hello World",这个变量是文本输入框文本的数据绑定源。你可以认为执行init()后会得到如下结果:





  1.    1: Hello World!
  2.    2: Hello World!


复制代码

事实上,输出为空!当我第一次运行代码时感到很困惑。然后我调用调试器去观察幕后程序 是如何运行的。



这是我发现的:

1.程序初始化

2.首先LabelValue变量被初始化,出发属性观察器(因为它被使用了绑定)

3.这时,文本输入域为空,绑定无法完成

4.接下来,初始化文本输入框

5.默认情况下,输入框的文本为空

6.因为文本输入框也是数据绑定的一部分(谨记此例中数据绑定是双向的),属性检查器执行并设置labelValue值为空

7.最后,程序完成创建过程,init()被执行,这时,变量和文本输入框的文本属性获得相同值,都为空



如果我希望代码按照预期的想法正常运行,我必须在creationComplete事件 或之后初始化labelValue变量:




  1. private function init():void {
  2.    labelValue = "Hello Wold!";
  3. }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章