[组件开发] 自定义ItemRenderer常遇到的警告unable to bind to property的解决办法

昨天就遇到这样的现象：自定义的itemRenderer,然后定义数据类型是ArrayCollection，一发布，Console面板会输出很多这样的警告错误信息
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'icon' on class 'Object' (class is not an IEventDispatcher)

贴出来我自定义的itemRenderer(简化):

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
   
3. <mx:Image source="{data.icon}"/>
   
4. <mx:Button label="{data.label}"/>
   
5. </mx:VBox>

复制代码

网上搜索，得到这些信息：
ArrayCollection 是增强性的 Array，依然是用数组来存储数据，但支持多种排序、属性绑定等，适合用来处理复杂数据。
但是，其子元素是无法作为数据源绑定的。

网上和论坛好友们贴出来的解决办法都是采用ObjectProxy这个类做一个中间代理：
myArrayCollection.push(new ObjectProxy({"label":"Flex","icon":"assets/fl.png"}))
这样其实就是从数据源头来堵住这个可能发生的错误，但是这个做法有个缺点，他不能应用于标签数据<mx:ArrayCollection />这个格式的数据。

修改自定义的itemRenderer为下面这样，就什么都不用考虑了并且一切Ok了。

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
        <![CDATA[
                import mx.binding.utils.BindingUtils;
                
                [Bindable]
                private var _data:Object;
                [Bindable]
                private var _label:String;
                [Bindable]
                private var _icon:String;
                
                override public function set data(value:Object):void{
                        _label=value.label;
                        _icon=value.icon;
                        _data=value;
                }
                override public function get data():Object{
                        return _data;
                }
        ]]>
</mx:Script>
        <mx:Image source="{_icon}"/>
        <mx:Button label="{_label}"/>
</mx:VBox>

更直接一点的方法:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
        <![CDATA[
                [Bindable]
                private var _label:String;
                [Bindable]
                private var _icon:String;
                
                override public function set data(value:Object):void{
                        super.data=value;

                       if(data)
                       {
                              _label=data.label;
                              _icon=data.icon;
                       }
                       else
                       {
                              _label="";
                              _icon="";
                       }
                }
        ]]>
</mx:Script>
        <mx:Image source="{_icon}"/>
        <mx:Button label="{_label}"/>
</mx:VBox>

转载：http://bbs.9ria.com/thread-22017-1-1.html