Flex数据绑定中绑定到函数、对象和数组-js给数组添加数据

本文和大家重点讨论一下Flex数据绑定中如何绑定到函数、对象和数组，Flex数据绑定是将一个对象中的数据同另一个对象中的数据联系在一起的过程。

Flex数据绑定

1.绑定到函数、对象和数组

(1)绑定函数以响应Flex数据绑定事件

可以把使用“不可绑定的参数”的函数作为Flex数据绑定表达式的源。但是，必须有一种办法能够激活这个函数以更新Flex数据绑定的目的属性。
在下面的例子中，使用了[Bindable]元数据标记来指定Felx调用isEnabled()函数以响应myFlagChanged事件。当myFlag的setter方法被调用时，它就发出了一个myFlagChanged事件，这个事件触发任何使用isEnabled()函数作为源的Flex数据绑定。

<?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<![CDATA[  
importflash.events.Event;  
//Defineafunctionthatgetsinvoked  
//inresponsetothemyFlagChangedevent.  
[Bindable(event="myFlagChanged")]  
privatefunctionisEnabled():String{  
if(myFlag)  
return'true';  
else  
return'false';  
}  
privatevar_myFlag:Boolean=false;  
//Defineasettermethodthatdispatchesthe  
//myFlagChangedeventtotriggerthedatabinding.  
publicfunctionsetmyFlag(value:Boolean):void{  
_myFlag=value;  
dispatchEvent(newEvent("myFlagChanged"));  
}  
publicfunctiongetmyFlag():Boolean{  
return_myFlag;  
}  
]]>

#p# (2)将对象用于Flex数据绑定

当使用对象进行工作时，不得不考虑什么时候定义到这个对象的绑定？或者考虑什么时候定义一个到这个对象属性的绑定？

绑定到对象

当使一个对象成为Flex数据绑定表达式的源时，Flex数据绑定发生在这个对象被更新之时，或者这个对象的引用被更新之时，但不能发生在这个对象的单个（数据）域（feild）被更新之时。
下面的范例中，创建了Object类的子类，这个子类带有两个属性，stringProp和intProp，但没有使这两个属性成为可绑定属性：

packagemyComponents  
{  
//binding/myComponents/NonBindableObject.as  
//Makenoclasspropertiesbindable.  
publicclassNonBindableObjectextendsObject{  
publicfunctionNonBindableObject(){  
super();  
}  
publicvarstringProp:String="Stringproperty";  
publicvarintProp:int=52;  
}  
}

因为这个类的两个属性不是可绑定属性，当它们被更新时Flex不会发出事件去触发Flex数据绑定。接下来在Flex应用中使用这个类，如下面的范例所示：

<?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
creationComplete="initObj();"> 
 
<![CDATA[  
importmyComponents.NonBindableObject;  
[Bindable]  
publicvarmyObj:NonBindableObject=newNonBindableObject();  
[Bindable]  
publicvaranotherObj:NonBindableObject=  
newNonBindableObject();  
publicfunctioninitObj():void{  
anotherObj.stringProp='anotherObject';  
anotherObj.intProp=8;  
}  
]]> 
 
<mx:Buttonlabelmx:Buttonlabel="ChangemyObj.stringProp" 
click="myObj.stringProp='newstring';"/> 
 
<mx:Buttonlabelmx:Buttonlabel="ChangemyObj.intProp" 
click="myObj.intProp=10;"/> 
 
<mx:Buttonlabelmx:Buttonlabel="ChangemyObj" 
click="myObj=anotherObj;"/>

因为没有使NonBindableObject类的单个数据域（fields）成为可绑定属性，所以应用在两个Text控件的绑定在应用启动时以及在myObj被更新时才会被更新。在编译这个应用时，编译器会输出警告信息，提示Flex数据绑定机制不能检测stringProp和intProp属性的变化。

#p#(3)绑定到对象的属性

为了使对象的属性可绑定，要创建新的类定义，如下面的范例所示：

packagemyComponents  
{  
//binding/myComponents/BindableObject.as  
//Makeallclasspropertiesbindable.  
[Bindable]  
publicclassBindableObjectextendsObject{  
publicfunctionBindableObject(){  
super();  
}  
publicvarstringProp:String="Stringproperty";  
publicvarintProp:int=52;  
}  
}

通过在类定义之前放置[Bindable]元数据标记，就可以使得类中所有public变量、以及所有完全具备setter及getter的public属性成为可绑定的属性。接下来就可以使用stringProp和intProp属性作为Flex数据绑定的源，如下范例所示：

<?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
creationComplete="initObj();"> 
 
<![CDATA[  
importmyComponents.BindableObject;  
[Bindable]  
publicvarmyObj:BindableObject=newBindableObject();  
[Bindable]  
publicvaranotherObj:BindableObject=  
newBindableObject();  
publicfunctioninitObj():void{  
anotherObj.stringProp='anotherObject';  
anotherObj.intProp=8;  
}  
]]> 
 
<mx:Buttonlabelmx:Buttonlabel="ChangemyObj.stringProp" 
click="myObj.stringProp='newstring';"/> 
 
<mx:Buttonlabelmx:Buttonlabel="ChangemyObj.intProp" 
click="myObj.intProp=10;"/> 
 
<mx:Buttonlabelmx:Buttonlabel="ChangemyObj" 
click="myObj=anotherObj;"/>

#p# (4)在绑定中使用数组

在使用数组进行工作时，比如Array或者ArrayCollection对象，可以把数组作为Flex数据绑定表达式的源或目的。
注意:当使用数组作为绑定源时，应该使用ArrayCollection类型的数组，因为ArrayCollection类在数组或数组元素发生变化时能够发出事件来触发Flex数据绑定。比如，对ArrayCollection.addItem(),ArrayCollection.addItemAt(),ArrayCollection.removeItem(),以及ArrayCollection.removeItemAt()方法的调用都会触发Flex数据绑定。

绑定到数组

通常将数组绑定给Flex控件的dataProvider属性，下面范例说明将数组绑定用于List控
件：

<?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<![CDATA[  
importmx.collections.ArrayCollection;  
[Bindable]  
publicvarmyAC:ArrayCollection=newArrayCollection([  
"One","Two","Three","Four"]);  
[Bindable]  
publicvarmyAC2:ArrayCollection=newArrayCollection([  
"Uno","Dos","Tres","Quatro"]);  
]]> 
 
<mx:Button 
label="ChangeElement" 
click="myAC[0]='modOne'"/> 
 
<mx:Button 
label="AddElement" 
click="myAC.addItem('newelement');"/> 
 
<mx:Button 
label="RemoveElement0" 
click="myAC.removeItemAt(0);"/> 
 
<mx:Button 
label="ChangeArrayCollection" 
click="myAC=myAC2"/>

这个例子定义了一个ArrayCollection对象，然后将List控件的dataProvider属性设置为对这个ArrayCollection的Flex数据绑定。当修改ArrayCollection对象中的元素，或者修改对ArrayCollection对象的引用，都会触发Flex数据绑定。

绑定到数组中的元素

可以使用数组中的单个元素作为Flex数据绑定源，如下例所示：

<?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<![CDATA[  
importmx.collections.ArrayCollection;  
[Bindable]  
publicvarmyAC:ArrayCollection=newArrayCollection([  
"One","Two","Three","Four"]);  
[Bindable]  
publicvarmyAC2:ArrayCollection=newArrayCollection([  
"Uno","Dos","Tres","Quatro"]);  
]]> 
 
<mx:Buttonidmx:Buttonid="button1" 
label="ChangeElement" 
click="myAC[0]='newOne'"/> 
<mx:Buttonidmx:Buttonid="button2" 
label="ChangeArrayCollection" 
click="myAC=myAC2"/>

如果通过方括号语法[]来指定数组元素作为Flex数据绑定表达式的源，那么Flex数据绑定只在应用启动时触发，或者在数组或其引用被更新时触发。当这个数组元素被更新的时候不会触发Flex数据绑定。
但Flex数据绑定表达式中的myAC.getItemAt(0)则会在该数组元素变化时被触发更新。因此，id为text2的Text控件在点击button1时会被更新，而id为text1的Text控件则不会被更新。
当使用数组中的元素作为Flex数据绑定表示的源时，应当在绑定表达式中使用ArrayCollection.getItemAt()方法。

点击button2时将myAC2拷贝给myAC，这会触发对数组元素的所有Flex数据绑定而不论它们是如何实现的。

【编辑推荐】