Deep Binding in Flex

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>

Answer 2

In the past I added my List into my Module and it never gave me any binding problems. But yes it seems very strange that the component in between breaks the binding.

The object stored in the Collection looks like this:

package code.converters.objects
{
    public class LineupLI
    {
        private var _plid:int;
        private var _lastname:String;
        private var _firstname:String;
        private var _shirtnumber:int;
        private var _onpitch:Boolean;

        private var _distance:Number;
        private var _topspeed:Number;

        private var _goals:int = 0;

        private var _subin:Boolean      = false;
        private var _subout:Boolean     = false;

        private var _redcard:Boolean    = false ;
        private var _yellowcard:Boolean = false;

        private var _teamid:int;

        private var _teamlongdesc:String;

        private var _second_increase:Number;

        [Bindable]
        public function get OnPitch():Boolean { return _onpitch; }
        public function set OnPitch(value:Boolean):void { _onpitch = value; }

        [Bindable]
        public function get ShirtNumber():int { return _shirtnumber;  }
        public function set ShirtNumber(value:int):void { _shirtnumber = value; }

        [Bindable]
        public function get PlId():int { return _plid; }
        public function set PlId(value:int):void { _plid = value; }

        [Bindable]
        public function get FirstName():String { return _firstname;  }
        public function set FirstName(value:String):void { _firstname = value; }

        [Bindable]
        public function get LastName():String { return _lastname;  }
        public function set LastName(value:String):void { _lastname = value; }

        [Bindable]
        public function get Distance():Number { return _distance;  }
        public function set Distance(value:Number):void { _distance = value; }

        [Bindable]
        public function get TopSpeed():Number { return _topspeed;  }
        public function set TopSpeed(value:Number):void { _topspeed = value; }

        [Bindable]
        public function get Goals():int { return _goals;  }
        public function set Goals(value:int):void { _goals = value; }

        [Bindable]
        public function get SubIn():Boolean { return _subin;  }
        public function set SubIn(value:Boolean):void { _subin = value; }

        [Bindable]
        public function get SubOut():Boolean { return _subout;  }    
        public function set SubOut(value:Boolean):void { _subout = value; }

        [Bindable]
        public function get RedCard():Boolean { return _redcard;  }
        public function set RedCard(value:Boolean):void { _redcard = value; }

        [Bindable]
        public function get YellowCard():Boolean { return _yellowcard;  }
        public function set YellowCard(value:Boolean):void { _yellowcard = value; }

        [Bindable]
        public function get TeamId():int { return _teamid;  }
        public function set TeamId(value:int):void { _teamid = value; }

        [Bindable]
        public function get TeamLongDesc():String { return _teamlongdesc;  }
        public function set TeamLongDesc(value:String):void { _teamlongdesc = value; }

        [Bindable]
        public function get SecondIncrease():Number { return _second_increase;  }
        public function set SecondIncrease(value:Number):void { _second_increase = value; }        
   }
}

Answer 3

Looks ok to me... i think there could be a couple of problems here. One is the binding not working and the second (as David Hanak stated) being why the warning

warning: unable to bind to property 'parent' on class 'modules::CustomModule'

is being thrown which doesn't seem to relate to any of your objects. I would try to solve the latter first and try and figure out why that is happening. You may find that this fixes the original binding problem.