[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编译器处理后的代码:
[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));
}
}
}
由上面可以看到数据源更改的时候抛出了一个PropertyChangeEvent事件,通知事件侦听器该数据源发生了变化,并更新视图。
“这也说明了,绑定不过是事件游戏而已,flex为用户隐藏了很多底层算法。”这句概括说明了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()">
[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));
}
}
=====================================================================================
Flex中提供了[Bindable]标签,可以方便的实现数据绑定。但是其背后的原理是什么呢?可以用flash.utils.describeType这个工具来分析。
假设有如下的类,对成员变量声明了数据绑定:
package test
...{
importmx.collections.ArrayCollection;
public classBindablePropertity
...{
[Bindable]
public var list:ArrayCollection = new ArrayCollection();
}
}
用flash.utils.describeType输出的xml如下:
<type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true">
<extendsClass type="Class"/>
<extendsClass type="Object"/>
<accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
<factory type="test::BindablePropertity">
<extendsClass type="Object"/>
<implementsInterface type="flash.events::IEventDispatcher"/>
<method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="String" optional="false"/>
</method>
<method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void">
<parameter index="1" type="String" optional="false"/>
<parameter index="2" type="Function" optional="false"/>
<parameter index="3" type="Boolean" optional="true"/>
</method>
<method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="String" optional="false"/>
</method>
<accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity">
<metadata name="Bindable">
<arg key="event" value="propertyChange"/>
</metadata>
</accessor>
<method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void">
<parameter index="1" type="String" optional="false"/>
<parameter index="2" type="Function" optional="false"/>
<parameter index="3" type="Boolean" optional="true"/>
<parameter index="4" type="int" optional="true"/>
<parameter index="5" type="Boolean" optional="true"/>
</method>
<method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="flash.events::Event" optional="false"/>
</method>
</factory>
</type>
可以看出,增加了[Bindable]声明后,相当于这个类实现了IEventDispatcher接口,并且在数据发生变化时会分发propertyChange事件。这样,其他监听了这一事件的组件就可以在数据变化时得到通知。
Flex组件的属性大多可以用花括号“{}”进行绑定,也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析,可以看到:
x<type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true">
<extendsClass type="Class"/>
<extendsClass type="Object"/>
<accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
<factory type="test::BindablePropertity">
<extendsClass type="Object"/>
<implementsInterface type="flash.events::IEventDispatcher"/>
<method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="String" optional="false"/>
</method>
<method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void">
<parameter index="1" type="String" optional="false"/>
<parameter index="2" type="Function" optional="false"/>
<parameter index="3" type="Boolean" optional="true"/>
</method>
<method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="String" optional="false"/>
</method>
<accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity">
<metadata name="Bindable">
<arg key="event" value="propertyChange"/>
</metadata>
</accessor>
<method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void">
<parameter index="1" type="String" optional="false"/>
<parameter index="2" type="Function" optional="false"/>
<parameter index="3" type="Boolean" optional="true"/>
<parameter index="4" type="int" optional="true"/>
<parameter index="5" type="Boolean" optional="true"/>
</method>
<method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="flash.events::Event" optional="false"/>
</method>
</factory>
</type>
package test
...{
importmx.collections.ArrayCollection;
public classBindablePropertity
...{
[Bindable]
public var list:ArrayCollection = new ArrayCollection();
}
}
<type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true">
<extendsClass type="Class"/>
<extendsClass type="Object"/>
<accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
<factory type="test::BindablePropertity">
<extendsClass type="Object"/>
<implementsInterface type="flash.events::IEventDispatcher"/>
<method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="String" optional="false"/>
</method>
<method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void">
<parameter index="1" type="String" optional="false"/>
<parameter index="2" type="Function" optional="false"/>
<parameter index="3" type="Boolean" optional="true"/>
</method>
<method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="String" optional="false"/>
</method>
<accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity">
<metadata name="Bindable">
<arg key="event" value="propertyChange"/>
</metadata>
</accessor>
<method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void">
<parameter index="1" type="String" optional="false"/>
<parameter index="2" type="Function" optional="false"/>
<parameter index="3" type="Boolean" optional="true"/>
<parameter index="4" type="int" optional="true"/>
<parameter index="5" type="Boolean" optional="true"/>
</method>
<method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="flash.events::Event" optional="false"/>
</method>
</factory>
</type>
<type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true">
<extendsClass type="Class"/>
<extendsClass type="Object"/>
<accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
<factory type="test::BindablePropertity">
<extendsClass type="Object"/>
<implementsInterface type="flash.events::IEventDispatcher"/>
<method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="String" optional="false"/>
</method>
<method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void">
<parameter index="1" type="String" optional="false"/>
<parameter index="2" type="Function" optional="false"/>
<parameter index="3" type="Boolean" optional="true"/>
</method>
<method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="String" optional="false"/>
</method>
<accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity">
<metadata name="Bindable">
<arg key="event" value="propertyChange"/>
</metadata>
</accessor>
<method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void">
<parameter index="1" type="String" optional="false"/>
<parameter index="2" type="Function" optional="false"/>
<parameter index="3" type="Boolean" optional="true"/>
<parameter index="4" type="int" optional="true"/>
<parameter index="5" type="Boolean" optional="true"/>
</method>
<method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean">
<parameter index="1" type="flash.events::Event" optional="false"/>
</method>
</factory>
</type>