Flex Tip - 在 Data Binding 内使用 [...] 运算子

Ticore's Blog

Flex MXML 的 Data Binding 功能很好用
但是在 Expression 区块内使用关联数组访问运算子会出现警告

Data binding will not be able to detect changes when using square bracket operator.
For Array, please use ArrayCollection.getItemAt() instead.

这是由于 Data Binding 无法检测到 Array 内元素的改变而跳出的警告消息
依照它的建议，改用 ArrayCollection.getItemAt() 可以解决
但是，很多情况下，资料来源并不是数组啊

以下便是一个例子
资料来源是 ObjectProxy 对象
objectProxy 对象整个被替换时，与 cb.value 改变时
Data Binding 都会被正常触发
objectProxy.prop1 属性单独改变时则不会触发
有时候，我们只需要这样的功能
但是它仍然会出现警告消息

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   backgroundColor="#F0F0F0" layout="vertical">
    <mx:Script>
        <![CDATA[
         import mx.utils.ObjectProxy;
         import mx.controls.*;
   
         [Bindable]
         public var objectProxy:ObjectProxy =
           new ObjectProxy({prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3"});
        ]]>
    </mx:Script>
 <mx:ComboBox id="cb" dataProvider="[1, 2, 3]" />
 <mx:Label text="{objectProxy['prop' + cb.value]}" />
</mx:Application>
<!-- Ticore's Blog - http://ticore.blogspot.com/ -->

这个时候，就面临两难了
是要放弃好用的 Data Binding Expression？ 或是对警告消息视而无见？

解决方式 1. 利用匿名函式将关联数组访问运算子包起来

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   backgroundColor="#F0F0F0" layout="vertical">
    <mx:Script>
        <![CDATA[
         import mx.utils.ObjectProxy;
         import mx.controls.*;
   
         [Bindable]
         public var objectProxy:ObjectProxy =
           new ObjectProxy({prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3"});
        ]]>
    </mx:Script>
 <mx:ComboBox id="cb" dataProvider="[1, 2, 3]" />
 <mx:Label text="{(function():*{return objectProxy['prop' + cb.value];})(objectProxy, cb.value)}" />
</mx:Application>
<!-- Ticore's Blog - http://ticore.blogspot.com/ -->

解决方式 2. 将关联数组访问运算子放到外部函式

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   backgroundColor="#F0F0F0" layout="vertical">
    <mx:Script>
        <![CDATA[
         import mx.utils.ObjectProxy;
         import mx.controls.*;
   
         [Bindable]
         public var objectProxy:ObjectProxy =
           new ObjectProxy({prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3"});
         
         public function getProp(...args):*{
          return objectProxy['prop' + cb.value];
         }
        ]]>
    </mx:Script>
 <mx:ComboBox id="cb" dataProvider="[1, 2, 3]" />
 <mx:Label text="{getProp(objectProxy, cb.value)}" />
</mx:Application>
<!-- Ticore's Blog - http://ticore.blogspot.com/ -->

重点来了，以上两种方法都有一个共通的要点
那就是 objectProxy, cb.value 这两个属性都要在 Data Binding Expression 内曝光一下
这样 Data Binding 才会抓到资料改变的触发事件

相关连结：
Flex 技巧 - 将资料绑定封装起来
Flex - 纯手工设置 DataBinding 的方式
Flex 技巧 - BindingManager 使用方式
Flex 技巧 - 观察 Data Binding 资料变化
Flex 2 Bindable Metadata Tag 背后实际作用
Flex 2.0 - 以 ActionScript 3.0 动态设置 Data Binding

转载请注明出处 http://ticore.blogspot.com/2008/03/flex-tip-bracket-operator-in-data.html