绑定到函数、对象和数组

原文地址：http://livedocs.adobe.com/flex/3/html/databinding_4.html 使用函数作为数据绑定源 你可以使用函数作为数据绑定表达式的一部分。函数的两个常用技术是把绑定的属性作为函数的参数来触发函数，或者让函数响应绑定事件。 使用参数是绑定的属性的函数 当把一个可绑定的属性作为函数的参数时，你可以把ActionScript函数用作数据绑定表达式的源。当可绑定的属性值改变时，这个函数会被执行，其运行结果会复制到目标属性，如下例子所示： <?xml version=”1.0″?><application xmlns:mx="”http://www.adobe.com/2006/mxml”"><currencyformatter id="”usdFormatter”" precision="”2″" currencysymbol="”$”" alignsymbol="”left”/"><textinput id="”myTI”" text="”Enter" number here></textinput><textarea text="”{usdFormatter.format(myTI.text)}”/"></textarea></currencyformatter></application> 其运行结果如下： Flash Content:Click Here to Show/Hide 在这个例子中，每当TextInput控件中的文本被修改时，Flex都调用CurrencyFormatter.format()方法更新TextArea控件。 如果给函数传递的参数不是可用作数据绑定表达式源的值，那么该函数只会在程序启动时被调用一次。 绑定函数响应数据绑定事件 你可以把一个没有可绑定属性做参数的函数作为数据绑定表达式的源。只不过你需要有一种能够调用该函数更新数据绑定目标的方法。 在下面的例子中，使用[Bindable]元数据标签指示Flex调用isEnabled()函数来响应myFlagChanged事件。当调用myFlag setter时，它会广播一个myFlagChanged事件，触发所有使用isEnabled()函数作为源的数据绑定。 <?xml version=”1.0″?><application xmlns:mx="”http://www.adobe.com/2006/mxml”"><script></script><textarea id="”myTA”" text="”{isEnabled()}”/"><button label="”Clear" myflag click="”myFlag=false;”/"><button label="”Set" myflag click="”myFlag=true;”/"></button></button></textarea></application> 其运行结果如下： Flash Content:Click Here to Show/Hide 使用对象做数据绑定 当使用对象时，你应该思考一下，什么使用绑定到对象，什么时候绑定到对象的属性。 绑定到对象 当你把对象用作数据绑定表达式的源时，当对象更新时或者对该对象的引用更新时，而不是当对象的某个字段更新时，数据绑定就会发生。 下面的例子是一个Object的子类，定义了两个属性，stringProp和intProp,但并没有把它们指定为可绑定的： ACTIONSCRIPT3 show/hide 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 package myComponents { // binding/myComponents/NonBindableObject.as // Make no class properties bindable. public class NonBindableObject extends Object { public function NonBindableObject() { super(); } public var stringProp:String = "String property"; public var intProp:int = 52; } } 因为这个类的属性不是可以绑定的，所以当他们的值改变时，Flex不会广播触发数据绑定的事件。看下面的例子： <?xml version=”1.0″?><application xmlns:mx="”http://www.adobe.com/2006/mxml”" creationcomplete="”initObj();”"><script></script><text id="”text1″" text="”{myObj.stringProp}”/"><text id="”text2″" text="”{myObj.intProp}”/"><button label="”Change" myobj click="”myObj.stringProp" string></button> <button label="”Change" myobj click="”myObj.intProp"></button> <button label="”Change" myobj click="”myObj" anotherobj></button> </text></text></application> 其运行结果如下： Flash Content:Click Here to Show/Hide 由于你没有把NonBindableObject的单个字段做成可绑定的，这两个Text控件的数据绑定会在应用程序启动时、myObj被修改时，而不是myObj的单个字段被修改时更新。 当你编译这段代码时，编译器会输出警告语句：数据绑定机制无法侦测到stringProp和intProp的变化。 绑定到对象的属性 要使一个对象的属性成为可绑定的，你应该像下面这样定义类： ACTIONSCRIPT3 show/hide 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 package myComponents { // binding/myComponents/BindableObject.as // Make all class properties bindable. [Bindable] public class BindableObject extends Object { public function BindableObject() { super(); } public var stringProp:String = "String property"; public var intProp:int = 52; } } 通过把[Bindable]元数据标签放到类定义之前，就把所有使用变量定义的、使用getter/setter方法定义的公共属性做成了可绑定的。这样，就可以把stringProp和intProp用作数据绑定的源了，如下所示： <?xml version=”1.0″?><application xmlns:mx="”http://www.adobe.com/2006/mxml”" creationcomplete="”initObj();”"><script></script><text id="”text1″" text="”{myObj.stringProp}”/"><text id="”text2″" text="”{myObj.intProp}”/"><button label="”Change" myobj click="”myObj.stringProp" string></button> <button label="”Change" myobj click="”myObj.intProp"></button> <button label="”Change" myobj click="”myObj" anotherobj></button> </text></text></application> 其运行结果如下： Flash Content:Click Here to Show/Hide 用数组做绑定 当使用数组，如Array或ArrayCollection对象时，你可以把数组用作数据绑定表达式的源或目标。 注意：当使用数组作为数据绑定表达式的源时，数组的类型应该时ArrayCollection，因为当数组或数组元素更新时，ArrayCollection会广播触发数据绑定的事件。比如，调用ArrayCollection.addItem()、ArrayCollection.addItemAt()、ArrayCollection.removeItem()、ArrayCollection.removeItemAt()都会触发数据绑定。 绑定到数组 你经常会把数组绑定到Flex控件的dataProvider属性上，如下所示： <application xmlns:mx="”http://www.adobe.com/2006/mxml”"><script></script><list dataprovider="”{myAC}”/"><button label="”Change" element click="”myAC[0]=’mod" one></button> <button label="”Add" element click="”myAC.addItem(‘new"></button> <button label="”Remove" element click="”myAC.removeItemAt(0);”/"><button label="”Change" arraycollection click="”myAC=myAC2″/"></button></button></list></application> 其运行结果如下： Flash Content:DOWNLOAD:Click Here to Show/Hide 本例定义了一个ArrayCollection对象，然后使用数据绑定把List控件的数据提供者指定为该ArrayCollection。当你修改ArrayCollection对象中的元素的值的时候，或者当修改ArrayCollection对象的引用的时候，都会触发数据绑定。 绑定到数组元素 你可以把ArrayCollection的单个元素用作源或数据绑定表达式，如下例子所示： <?xml version=”1.0″?><application xmlns:mx="”http://www.adobe.com/2006/mxml”"><script></script><text id="”text1″" text="”{myAC[0]}”/"><text id="”text2″" text="”{myAC.getItemAt(0)}”/"><button id="”button1″" label="”Change" element click="”myAC[0]=’new" one></button> <button id="”button2″" label="”Change" arraycollection click="”myAC=myAC2″/"></button></text></text></application> 其运行结果如下： Flash Content:Click Here to Show/Hide 如果你使用中括号语法,[],把数组的元素指定为数据绑定表达式的源时，只有当应用程序启动、数组或数组的引用发生改变时，才会触发数据绑定；当这个单独的数组元素改变时，不会触发数据绑定。 但是，当数组元素改变时，数据绑定表达式myAC.getItemAt(0)会被触发。因此，当点击button1时，Text控件text2会更新，text1不会。当想把数组的元素用作数据绑定表达式源时，应该使用ArrayCollection.getItemAt()用在数据绑定表达式中。 点击button2，把myAC2拷贝给myAC，会触发所有到数组元素的绑定，而不管你是如何实现的它们。