Question

So I have a module in flex in which I add a custom component. I also have a class that handles the data I want to show, lets call this class DataHandler.

The DataHandler receives data from the back-end solution and then starts putting the data togheter for my Module and the custom component.

When the data is ready it dispatches an event that my Module catch. I send the new data in to my component.

example code for this in Module:

private function onDataChange(evt:Event=null):void {     _customComponent.ItemData = _dataHandler.DataProvider; } 

The _customComponent then gets the data :

public function set ItemData(value:ItemDataVO):void {       _itemdata  = value; } 

// _itemdata is a custom class named ItemDataVO

Now in my custom component I just bind the data to my mxml components , for example

<mx:Label     text       = 'Text: {_itemdata.Text}'    fontFamily = 'Hel'    fontSize   = '12'         x          = '83'     y          = '40' /> 

When I get new data the label automaticly changes.

So far so good. But what I also have in my custom component is i List. And this is my problem. When I bind the data to the List I do the following:

<mx:List    id            = '_list'    dataProvider  ='{_itemdata.Collection}'    itemRenderer  = 'components.renderers.CustomRenderer' /> 

// this _itemdata.Collection is an ArrayCollection that contains a collection of items based on a custom class.

The binding does not work, and I also get a varning for each item in the list at runtime:

warning: unable to bind to property ‘parent’ on class ‘modules::CustomModule’

( I have also tried, as a workaround, to set the _list’s itemrenderer each time the ItemData is set. The new listdata then update but I dont see any visual update in the list. )

Anyone knows how to make this binding work?

Regards Adlertz =)

Answer 1

Have you set the collection property on ItemDataVo to be bindable… something like

package {     import mx.collections.ArrayCollection;      public class ItemDataVo     {         [Bindable]         public var text : String;          [Bindable]         public var collection : ArrayCollection         public function ItemDataVo()         {         }      } } 

I have made a simplified working example showing binding working on a model similar to yours (although there will obviously be differences) with binding working correctly so long as both the text and collection properties both have the Bindable meta data attached:

<?xml version='1.0' encoding='utf-8'?> <mx:Application xmlns:mx='http://www.adobe.com/2006/mxml' layout='vertical' xmlns:local='*' creationComplete='creationCompleteHandler(event)'>      <mx:Script>         <![CDATA[             import mx.collections.ArrayCollection;             import mx.events.FlexEvent;              [Bindable]             protected var itemData : ItemDataVo;              private function creationCompleteHandler(event : FlexEvent) : void             {                 generateItemData();              }              protected function generateItemData() : void             {                 itemData = new ItemDataVo();                 itemData.text = 'New Text With Random ' + Math.random() * 100;                 itemData.collection = generateCollection();             }              protected function generateCollection() : ArrayCollection             {                 var arrayCollection : ArrayCollection = new ArrayCollection();                 arrayCollection.addItem('New Item With Random ' + Math.random() * 100);                 arrayCollection.addItem('New Item With Random ' + Math.random() * 100);                 arrayCollection.addItem('New Item With Random ' + Math.random() * 100);                 arrayCollection.addItem('New Item With Random ' + Math.random() * 100);                 arrayCollection.addItem('New Item With Random ' + Math.random() * 100);                 arrayCollection.addItem('New Item With Random ' + Math.random() * 100);                  return arrayCollection;             }              private function fullClickHandler(event : MouseEvent) : void             {                 generateItemData();              }             private function collectionClickHandler(event : MouseEvent) : void             {                 itemData.collection = generateCollection();             }          ]]>     </mx:Script>      <mx:VBox width='100%' height='100%'>         <mx:VBox>             <mx:Label text='{itemData.text}' />             <mx:List dataProvider='{itemData.collection}' />         </mx:VBox>         <mx:HBox>             <mx:Button label='UPDATE FULL ITEM DATA' click='fullClickHandler(event)'/>             <mx:Button label='UPDATE COLLECTION' click='collectionClickHandler(event)'/>         </mx:HBox>     </mx:VBox> </mx:Application>