[flexcoders] Binding not working in custom class and DataGrid using XMLListCollection

[Greg Lafrance]

I have a class with an XMLListCollection, and I am using that class xlc as the 
dataProvider in a DataGrid, but when I change the xlc in the class instance, 
the DataGrid does not reflect the change. Any ideas?

----- TestClass1.as -----
package
{
  import flash.events.EventDispatcher;
  
  import mx.collections.XMLListCollection;
  
  public class TestClass1 extends EventDispatcher{
    private var xml_1:XML = 
      <root>
        <item>one</item>
        <item>two</item>
        <item>three</item>
      </root>;

    private var xml_2:XML = 
      <root>
        <item>ten</item>
        <item>twenty</item>
        <item>thirty</item>
      </root>;

    private var _xlc:XMLListCollection = new XMLListCollection(xml_1..item);
    
    public function TestClass1(){
    }

    public function get xlc():XMLListCollection{
      return this._xlc;
    }
    
    public function loadData():void{
      this._xlc = new XMLListCollection(xml_2..item);
    }
  }
}


----- TestApp.mxml -----
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
  width="100%">
  <mx:Script>
    <![CDATA[
      import mx.collections.XMLListCollection;
      private var tc1:TestClass1 = new TestClass1();
      
      [Bindable] private var xlcCollection:XMLListCollection = tc1.xlc;
    ]]>
  </mx:Script>
  <mx:DataGrid dataProvider="{xlcCollection}"/>
  <mx:Button label="Change Data" click="tc1.loadData();"/>
</mx:Application>