未理解的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>