title: Unable to bind to property of custom component
body: <p>Can't seem to bind to data from within a custom component. I've tried BindUtilis and {} but can't seem to fathom it out. Here's what I've got:</p>
  
  <p>I have a class DataModel which has been made bindable </p>
  
  <p>Within Mainn.mxml I have two components: DataGrid (used for testing) &amp; CustomComponent (which extends Canvas)</p>
  
  <p>When the data within DataModel.somelist is updated the DataGrid reflects the changes but the CustomComponent doesn't appear to. </p>
  
  <p>I was expecting to see the trace (CustomComponent.dataProvider) fired whenever this._dataModel.itemList is changed. What am I doing wrong? </p>
  
  <p>Main.mxml looks something like this:</p>
  
  <pre><code>&lt;mx:Script&gt;
  &lt;![CDATA[
      import model.DataModel;
  
      [Bindable]
      private var _dataModel:DataModel = DataModel.getInstance();
  
  ]]&gt;
  &lt;/mx:Script&gt;
  
  &lt;mx:VBox width="100%" height="100%"&gt;
      &lt;views:ItemDisplayList  width="100%" height="300" id="idl" &gt;
          &lt;views:dataProvider&gt;
              {this._dataModel.itemList}
          &lt;/views:dataProvider&gt;
      &lt;/views:ItemDisplayList&gt;
  
      &lt;mx:DataGrid id="dg" width="100%" height="300" &gt;
          &lt;mx:dataProvider&gt;
              {this._dataModel.itemList}
          &lt;/mx:dataProvider&gt;
      &lt;/mx:DataGrid&gt;
  &lt;/mx:VBox&gt;
  </code></pre>
  
  <p>The CustomComponent has this AS class:</p>
  
  <pre><code>package code{
  
  import model.DataModel;
  import mx.containers.Canvas;
  
  public class CustomComponent extends Canvas{
  
      [Bindable]
      private var _dataModel:DataModel = DataModel.getInstance();
  
      private var _dataProvider:ArrayCollection ;  
  
      public function CustomComponent(){
          super();
          _dataProvider = new ArrayCollection();
          trace("CustomComponent start");
      }
  
      public function get dataProvider() : ArrayCollection {
          trace("get dataProvider");
          return _dataProvider;
      }
  
      public function set dataProvider(value: ArrayCollection) : void {
          trace("set dataProvider");
          this._dataProvider = value;
          invalidateProperties();
          invalidateSize();
          invalidateDisplayList();
          dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
     }
  
     ...
  
  
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number ) : void{
          trace("updateDisplayList");       
          super.updateDisplayList(unscaledWidth, unscaledHeight);         
      }
  }
  }
  </code></pre>