Flex數據綁定的四種方式

本文和大家重點討論一下Flex數據綁定的幾種方式，在Flex中，Flex數據綁定主要有四種方式，分別爲："{}"綁定表達式、[Bindable]綁定符號、<mx:Binding>標籤和BindingUtils動態綁定，下面一一對這四種Flex數據綁定方式進行詳細介紹。

Flex數據綁定 

現在數據庫或是某個文件裏有一些數據需要顯示在界面上該怎麼辦呢？我們的目的就是將這些數據設法放到界面上去可以顯示出來，這個將數據放到界面上去的過程可以叫住Flex數據綁定。

在Flex應用中程序中，Flex數據綁定的實際是藉助事件機制來完成的，當目標使用Flex數據綁定的時候，目標對象就會監聽數據源對象的某一固定事件。當數據源發生變化時，數據源會派發改變事件通知目標對象更新數據。實際開發中我們不需要去關注具體的實現過程，這個過程Flash/Flex會自動去完成。

在Flex中，Flex數據綁定主要有四種方式，分別爲："{}"綁定表達式、[Bindable]綁定符號、<mx:Binding>標籤和BindingUtils動態綁定，下面一一對這四種Flex數據綁定方式進行詳細介紹。

一、"{}"綁定表達式

Flex開發中，"{}"綁定表達式的應用是最爲常見的，簡單、方便。好比ASP.NET中的"<%%>"一樣的功效。這裏我就簡單介紹下，在Flex下怎麼使用"{}"綁定表達式來綁定數據。如有這樣一個簡單的需求，我們定義一個變量，通過"{}"綁定表達式將變量的值綁定到文本框或是按扭等類似的UI組件上，變量定義如下：

1<mx:Script>
2<![CDATA[
3[Bindable]
4internalvartext:String="嗨，這是通過\"{}\"表達式綁定的!";
5]]>
6</mx:Script>

如上定義了一個字符串的變量text，我們通過"{}"綁定表達式將其綁定在UI組件上呢？如下：

1<mx:Buttonxmx:Buttonx="97"y="122"label="{this.text}"fontSize="12"/>
2<mx:Labelxmx:Labelx="97"y="152"text="{this.text}"fontSize="12"/>
3<mx:Textxmx:Textx="97"y="178"text="{this.text}"fontSize="12"/>

簡潔、簡單、方便且適用。OK，已經學到手了，那下面繼續看看另一種綁定使用方式--綁定方法返回值。例如需要將一個方法的返回值通過"{}"綁定表達式進行Flex數據綁定，讓其在UI組件上呈現該怎麼做呢？如下方法定義：

1privatefunctionBindText():String
2{
3return"通過\"{}\"表達式綁定方法！";
4}

其實和上面一樣，直接將"{}"裏的變量改爲方法便OK，如下代碼段：

<mx:Labelx="114"y="277"text="{BindText()}"fontSize="12"/>
如上便完成了對方法的綁定，既將BindText()方法的值綁定在了Label組件上。

二、[Bindable]綁定符號

[Bindable]綁定符號在上面就已經出現過了，他的使用和作用也很容易掌握。如上示例，我們的目的是將定義的變量值綁定在UI組件上，如果要實現這個功能，直接將定義的變量通過"{}"綁定表達式進行Flex數據綁定是不能完成功能的，我們必須爲所定義的變量標記[Bindable]。在Flex中，只有標記有[Bindable]的數據源才能進行Flex數據綁定（函數除外，上面示例中也證實了這一點），當然也可以是其他的數據源（xml,數據庫,文件等不同地方不同類型的數據源）。

上面這樣使用確實很簡單，但還是需要更加深入的瞭解[Bindable]。當指定了[Bindable]的數據源發生改變的時候，仍然是通過所監聽的事件方法來處理的“通知”，默認爲"propertyChange"事件。如之前定義的變量text，那麼完整的定義應該如下所示：

1[Bindable(event="propertyChange")]
2internalvartext:String="嗨，這是通過\"{}\"表達式綁定的!";
“propertyChange”事件爲默認事件，通常我們只需要使用簡寫形式[Bindable]就OK了。除此之外還需要注意兩點（這裏就不做介紹，在後續文章裏我會詳細介紹）：

1、[Bindable]標籤用於函數時，只能在setter和getter方式定義的函數前使用，這種綁定稱之爲函數級綁定。

2、[Bindable]標籤用於公有類時，這個類的所有公共變量，setter和getter方式定義的函數都可以用於綁定。這種綁定稱爲對象級綁定。

三、<mx:Binding>標籤

<mx:Binding>標籤也是使用非常頻繁的Flex數據綁定方式。到底怎麼個用法呢？下面以兩個小示例使用不同的數據源來進行Flex數據綁定演示。首先用<mx:Model>標籤定義一個數據源（<mx:Model>標籤就相當於的定義一個臨時數據，這裏不做詳細介紹，不清楚它的作用的朋友請查閱相關資料學習）。<mx:Model>標籤定義數據源如下：

1<mx:Modelidmx:Modelid="books">
2<Books>
3<Book>
4<Name>ActionScript3.0</Name>
5<Author>張三</Author>
6</Book>
7<Book>
8<Name>FlashCS3</Name>
9<Author>李四</Author>
10</Book>
11</Books>
12</mx:Model>

如上定義的數據源，通過<mx:Binding>標籤來進行Flex數據綁定是很簡單的，如下代碼段：

1<mx:Bindingsourcemx:Bindingsource="books.Book[0].Name"destination="txtName.text"/>
2<mx:Bindingsourcemx:Bindingsource="books.Book[1].Name"destination="txtAuthor.text"/>
3
4<mx:TextInputxmx:TextInputx="95"y="71"id="txtName"fontSize="12"/>
5<mx:TextInputxmx:TextInputx="95"y="115"id="txtAuthor"fontSize="12"/>

<mx:Model>標籤可以用來定義XML式的數據源，另外還可以通過編程的方式定義數據源或從數據庫、文件或各種數據服務接口來獲取數據源，下面是使用xml的數據源定義：

1privatevarxml:XML=<Books>
2<Book>
3<Name>ActionScript3.0</Name>
4<Author>張三</Author>
5