Flex warning: unable to bind to property 'name' on class 'Object' (class is not an IEventDispatcher)

If you have built a custom item renderer for a DataGroup or List you may have come across warnings in your Flash Builder console output similar to this:

warning: unable to bind to property 'firstName' on class 'Object' (class is not an IEventDispatcher)

This kind of warning typically happens when you are trying to bind to an object or property that isn’t defined as Bindable. I’ve seen this issue come up often when working with dataProviders that use <fx:Object />. For example, when running this application:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">   <s:List> <s:dataProvider> <s:ArrayList> <fx:Object firstName="Steve" lastName="Yzerman" /> <fx:Object firstName="Joe" lastName="Sakic" /> </s:ArrayList> </s:dataProvider> <s:itemRenderer> <fx:Component> <s:ItemRenderer> <s:HGroup> <s:Label text="{data.firstName}" /> <s:Label text="{data.lastName}" /> </s:HGroup> </s:ItemRenderer> </fx:Component> </s:itemRenderer> </s:List>   </s:Application>

The Flash Builder console outputs:

warning: unable to bind to property 'firstName' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'lastName' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'firstName' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'lastName' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'firstName' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'lastName' on class 'Object' (class is not an IEventDispatcher)

The issue is this custom inline renderer uses the { } binding syntax to bind to the value of data.firstName and data.lastName, but since the properties aren’t defined as bindable, changes to the data won’t get updated in the renderer (hence the warning).

There are two ways of changing your application to avoid these warnings.

1. Change your item renderer

Instead of binding the Label’s text property to the data you can override the set data method on the item renderer and update the Labels from there:

<s:ItemRenderer> <fx:Script> <![CDATA[ override public function set data(value:Object):void { txtFirstName.text = value.firstName; txtLastName.text = value.lastName; } ]]> </fx:Script> <s:HGroup> <s:Label id="txtFirstName" /> <s:Label id="txtLastName" /> </s:HGroup> </s:ItemRenderer>

If you aren’t comfortable overriding the set data method you might find it easier to listen for the dataChange event, for example:

<s:ItemRenderer dataChange="updateRenderer()"> <fx:Script> <![CDATA[ public function updateRenderer():void { txtFirstName.text = data.firstName; txtLastName.text = data.lastName; } ]]> </fx:Script> <s:HGroup> <s:Label id="txtFirstName" /> <s:Label id="txtLastName" /> </s:HGroup> </s:ItemRenderer>

Note: You should never key off of the creationComplete event in a spark item renderer unless you are fully aware of the consequences of item renderer recycling. Listening for the dataChange event is recommended.

2. Change the objects in your dataProvider

If you would like to take full advantage of the Binding syntax in your renderer then the objects in your dataProvider must be bindable. You can do this by creating a custom data type and defining some bindable properties on it. For example create a file called HockeyPlayer.as:

package { public class HockeyPlayer extends Object { [Bindable] public var firstName:String; [Bindable] public var lastName:String; } }

And then using this data structure in the dataProvider:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*">   <s:List> <s:dataProvider> <s:ArrayList> <local:HockeyPlayer firstName="Joe" lastName="Sakic" /> <local:HockeyPlayer firstName="Steve" lastName="Yzerman" /> </s:ArrayList> </s:dataProvider> <s:itemRenderer> <fx:Component> <s:ItemRenderer> <s:HGroup> <s:Label id="txtFirstName" text="{data.firstName}" /> <s:Label id="txtLastName" text="{data.lastName}" /> </s:HGroup> </s:ItemRenderer> </fx:Component> </s:itemRenderer> </s:List>   </s:Application>

from: http://flexponential.com/2009/11/11/binding-warnings-when-using-object-in-a-list-dataprovider/