Flex 学习总结 -- Bindable的原理

[Bindable]：元数据标签，它在代码中的作用就是向编译器提供如何编译程序的信息。它的最大作用是使程序组件间的数据同步变得容易。在开发中通常用上Bindable作用在视图控件上，如给它绑定一个对象，则以后只需要在逻辑层更改这个对象的值，则视图层的控件数据会自动更新（同步），而不再需要手动去更新视图。

现在来探索一下Bindable的工作原理：

先来实现一个简单的绑定例子：

<mx:Script> <![CDATA[ [Bindable] private var bind_String:String="hi"; private function onChange():void { bind_String = "hello"; } ]]> </mx:Script> <mx:Text text="{bind_String}"> <mx:Button click="onChange()">


单击按钮则改变了text的文字，这个就是bindable。那么它是怎样工作的呢？以下是flex编译器处理后的代码：

<wbr><textarea readonly name="code" class="html"> [Bindable(event="propertyChange")] private var bind_String:String="hi"; private function onChange():void { var oldValue:String = bind_String; bind_String = "hello"; if(bind_String!==oldValue) { this.dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, "bind_String", oldValue, bind_String)); } }</textarea><wbr>}<br><br> 由上面可以看到数据源更改的时候抛出了一个PropertyChangeEvent事件，通知事件侦听器该数据源发生了变化，并更新视图。<br><br> “这也说明了，绑定不过是事件游戏而已，flex为用户隐藏了很多底层算法。”这句概括说明了Bindable的原理。</wbr></wbr>

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

=====================================================================================

<wbr></wbr>

Flex中提供了[Bindable]标签，可以方便的实现数据绑定。但是其背后的原理是什么呢？可以用flash.utils.describeType这个工具来分析。
<wbr><wbr><wbr>假设有如下的类，对成员变量声明了数据绑定：<br><textarea readonly name="code" class="java">package test ...{ importmx.collections.ArrayCollection; public classBindablePropertity ...{ [Bindable] public var list:ArrayCollection = new ArrayCollection(); } }</textarea><br><br> 用flash.utils.describeType输出的xml如下：<br><textarea readonly name="code" class="html">&lt;type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true"&gt; &lt;extendsClass type="Class"/&gt; &lt;extendsClass type="Object"/&gt; &lt;accessor name="prototype" access="readonly" type="*" declaredBy="Class"/&gt; &lt;factory type="test::BindablePropertity"&gt; &lt;extendsClass type="Object"/&gt; &lt;implementsInterface type="flash.events::IEventDispatcher"/&gt; &lt;method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean"&gt; &lt;parameter index="1" type="String" optional="false"/&gt; &lt;/method&gt; &lt;method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void"&gt; &lt;parameter index="1" type="String" optional="false"/&gt; &lt;parameter index="2" type="Function" optional="false"/&gt; &lt;parameter index="3" type="Boolean" optional="true"/&gt; &lt;/method&gt; &lt;method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean"&gt; &lt;parameter index="1" type="String" optional="false"/&gt; &lt;/method&gt; &lt;accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity"&gt; &lt;metadata name="Bindable"&gt; &lt;arg key="event" value="propertyChange"/&gt; &lt;/metadata&gt; &lt;/accessor&gt; &lt;method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void"&gt; &lt;parameter index="1" type="String" optional="false"/&gt; &lt;parameter index="2" type="Function" optional="false"/&gt; &lt;parameter index="3" type="Boolean" optional="true"/&gt; &lt;parameter index="4" type="int" optional="true"/&gt; &lt;parameter index="5" type="Boolean" optional="true"/&gt; &lt;/method&gt; &lt;method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean"&gt; &lt;parameter index="1" type="flash.events::Event" optional="false"/&gt; &lt;/method&gt; &lt;/factory&gt; &lt;/type&gt;</textarea><br><br><br> 可以看出，增加了[Bindable]声明后，相当于这个类实现了IEventDispatcher接口，并且在数据发生变化时会分发propertyChange事件。这样，其他监听了这一事件的组件就可以在数据变化时得到通知。<br><wbr><wbr><wbr>Flex组件的属性大多可以用花括号“{}”进行绑定，也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析，可以看到：<br> x<textarea readonly name="code" class="html">&lt;type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true"&gt; &lt;extendsClass type="Class"/&gt; &lt;extendsClass type="Object"/&gt; &lt;accessor name="prototype" access="readonly" type="*" declaredBy="Class"/&gt; &lt;factory type="test::BindablePropertity"&gt; &lt;extendsClass type="Object"/&gt; &lt;implementsInterface type="flash.events::IEventDispatcher"/&gt; &lt;method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean"&gt; &lt;parameter index="1" type="String" optional="false"/&gt; &lt;/method&gt; &lt;method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void"&gt; &lt;parameter index="1" type="String" optional="false"/&gt; &lt;parameter index="2" type="Function" optional="false"/&gt; &lt;parameter index="3" type="Boolean" optional="true"/&gt; &lt;/method&gt; &lt;method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean"&gt; &lt;parameter index="1" type="String" optional="false"/&gt; &lt;/method&gt; &lt;accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity"&gt; &lt;metadata name="Bindable"&gt; &lt;arg key="event" value="propertyChange"/&gt; &lt;/metadata&gt; &lt;/accessor&gt; &lt;method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void"&gt; &lt;parameter index="1" type="String" optional="false"/&gt; &lt;parameter index="2" type="Function" optional="false"/&gt; &lt;parameter index="3" type="Boolean" optional="true"/&gt; &lt;parameter index="4" type="int" optional="true"/&gt; &lt;parameter index="5" type="Boolean" optional="true"/&gt; &lt;/method&gt; &lt;method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean"&gt; &lt;parameter index="1" type="flash.events::Event" optional="false"/&gt; &lt;/method&gt; &lt;/factory&gt; &lt;/type&gt;</textarea><br></wbr></wbr></wbr></wbr></wbr></wbr>

组件是通过监听propertyChange事件来更新数据的。但是前面的数据绑定声明并没有指定事件名称，这是因为[Bindable]是简化的写法，相当于[Bindable(event="propertyChange")]。这里的事件名称可以改变，但是Flex组件默认监听了名为propertyChange的事件，如果自己更改了事件名称，则必需在Flex中自己监听相应的事件并编写事件处理。
<wbr><wbr><wbr>下一篇将会介绍几个实际绑定的例子。</wbr></wbr></wbr>

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/thinkinside/archive/2007/11/12/1880058.aspx