未理解的flex的数据绑定的两种方式

三、<mx:Binding>标签

      <mx:Binding>标签也是使用非常频繁的数据绑定方式。到底怎么个用法呢？下面以两个小示例使用不同的数据源来进行数据绑定演示。首先用<mx:Model>标签定义一个数据源（<mx:Model>标签就相当于的定义一个临时数据，这里不做详细介绍，不清楚它的作用的朋友请查阅相关资料学习）。<mx:Model>标签定义数据源如下：

 1       < mx:Model id = " books " >
 2           < Books >
 3               < Book >
 4                   < Name > ActionScript  3.0 </ Name >
 5                   < Author > 张三 </ Author >
 6               </ Book >
 7               < Book >
 8                   < Name > Flash CS  3 </ Name >
 9                   < Author > 李四 </ Author >
10               </ Book >
11           </ Books >
12       </ mx:Model >

     如上定义的数据源，通过<mx:Binding>标签来进行数据绑定是很简单的，如下代码段：

1       < mx:Binding source = " books.Book[0].Name "  destination = " txtName.text "   />
2       < mx:Binding source = " books.Book[1].Name "  destination = " txtAuthor.text "   />
3      
4       < mx:TextInput x = " 95 "  y = " 71 "  id = " txtName "  fontSize = " 12 " />
5       < mx:TextInput x = " 95 "  y = " 115 "  id = " txtAuthor "  fontSize = " 12 " />

     <mx:Model>标签可以用来定义XML式的数据源，另外还可以通过编程的方式定义数据源或从数据库、文件或各种数据服务接口来获取数据源，下面是使用xml的数据源定义：

 1       private  var xml:XML =< Books >
 2                               < Book >
 3                                   < Name > ActionScript  3.0 </ Name >
 4                                   < Author > 张三 </ Author >
 5                               </ Book >
 6                               < Book >
 7                                   < Name > Flash CS  3 </ Name >
 8                                   < Author > 李四 </ Author >
 9                               </ Book >
10                           </ Books >

     绑定xml对象的数据和通过<mx:Model>标签定义的数据源没什么区别，详细如下代码块：

1       < mx:Binding source = " xml.Book[0].Name "  destination = " txtXmlName.text "   />
2       < mx:Binding source = " xml.Book[1].Name "  destination = " txtXmlAuthor.text "   />
3       < mx:TextInput x = " 95 "  y = " 177 "  id = " txtXmlName "  fontSize = " 12 " />
4       < mx:TextInput x = " 95 "  y = " 225 "  id = " txtXmlAuthor "  fontSize = " 12 " />

 

 

四、BindingUtils与动态绑定 

      在Flex中，动态绑定主要是通过BindingUtils类提供的两个静态方法来实现。该类位于包mx.binding.utils下，它提供了bindProperty()和bindSetter()两个静态方法来实现数据的动态绑定。

     bindProperty（）方法根据名称就可以看出大概意思，绑定属性。那实际开发中我们应该怎么应用他呢？其实很简单，一句话概括就是：将xx的YY属性绑定到AA的BB属性。更清楚的理解这句话的意思见下面代码片段：

 

 1  <? xml version = " 1.0 "  encoding = " utf-8 " ?>
 2  < mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml "  layout = " absolute " >
 3       < mx:Script >
 4           <! [CDATA[
 5              import mx.binding.utils.BindingUtils;
 6              
 7               private  var myName:String  =   " 张 三 " ; 
 8              
 9               internal  function onClick(): void
10              {
11                  BindingUtils.bindProperty(nameText, " text " ,btn, " label " );
12              }
13          ]] >
14       </ mx:Script >
15       < mx:TextInput x = " 84 "  y = " 83 "  id = " nameText "  text = "" />
16       < mx:Button x = " 102 "  y = " 153 "  label = " 动态绑定 "   id = " btn "  click = " onClick() " />     
17  </ mx:Application >

 

     这段代码很简单，在界面上分别放置了输入组件和一个按扭组件，然后定义了一个字符串(String)类型的变量myName，最后通过按扭的单击事件将按扭的"label"属性绑定到输入组件的"text"属性上。其实onClick()方法里的代码和下面这一句代码是完全等价的：

1  this .nameText.text  =   this .btn.label;

 

     bindSetter（）方法的使用也很简单，该方法绑定数据需要与setter类似的方法结合，将外部传递进去的参数进行方法委托实现数据的动态绑定，拿上面将按扭显示值绑定到文本输入组件的值的示例来说，只需要定义一个setter的方法，该bindProperty()方法为bindSetter()方法既可，详细见下面代码片段：

 1  <? xml version = " 1.0 "  encoding = " utf-8 " ?>
 2  < mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml "  layout = " absolute " >
 3       < mx:Script >
 4           <! [CDATA[
 5              import mx.binding.utils.BindingUtils;
 6              
 7               private  var myName:String  =   " 张 三 " ; 
 8              
 9               internal  function onClick(): void
10              {
11                   // BindingUtils.bindProperty(nameText,"text",btn,"label");
12                  BindingUtils.bindSetter(bindText,btn, " label " );
13              }
14              
15               internal  function bindText(text:String): void
16              {
17                   this .nameText.text  =  text;
18              }
19          ]] >
20       </ mx:Script >
21       < mx:TextInput x = " 84 "  y = " 83 "  id = " nameText "  text = "" />
22       < mx:Button x = " 102 "  y = " 153 "  label = " 动态绑定 "   id = " btn "  click = " onClick() " />     
23  </ mx:Application >