[flexcoders] What Am I doing Wrong, View will not update when bound data is changed.

[donvoltz]

Using Cairngorm, I am maintaining an ArrayCollection of a custom data
type. This data is bound to the view, however, when I update the data
in the ArrayCollection, the view is not updated until I redraw all of
the custom components. Is there a way for each component to respond
when I modify the data?

Here is the code

CUSTOM COMPONENT

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%"
height="100%" borderStyle="outset" cornerRadius="20">
        <mx:Script>
                <![CDATA[
                        import com.dynamicmedicalventures.or_metrics.RoomModel;
                        import mx.events.FlexEvent;
                
                [Bindable]
                private var _data:RoomModel;
                
                override public function set data(value:Object):void{
                        if(value != null){
                                super.data = value;
                                this._data = value as RoomModel;
                        }
                                dispatchEvent(new 
FlexEvent(FlexEvent.DATA_CHANGE));
                                super.invalidateProperties();
                
                }
                
                override protected function commitProperties():void {
                        super.commitProperties();
                        if(data != _data){
                                _data = data as RoomModel;
                        }
                }
                
                
                ]]>
        </mx:Script>
        
        <mx:Label x="10" y="10" fontSize="14" fontWeight="bold"
id="roomTitle" text="{_data.roomData.roomName}"/>
        <mx:Image x="846" y="10" id="roomStatus"/>
        <mx:List x="10" y="86" width="580" height="312" id="caseList"
dragEnabled="true" dropEnabled="true" dataProvider="{_data.caseList}" />
        <mx:Label x="10" y="60" text="Case List"/>
        <mx:Label x="618" y="60" text="Main Staff"/>
        <mx:Label x="618" y="204" text="Misc Staff"/>
        <mx:List x="618" y="86" width="163" id="mainList" height="110"
dataProvider="{_data.mainStaff}" />
        <mx:List x="619" y="230" id="miscList" width="163" height="110"
dataProvider="{_data.miscStaff}" />
        <mx:Label x="10" y="415" text="Equipment List"/>
        <mx:HorizontalList x="10" y="441" width="580"
dataProvider="{_data.equipmentList}" />
        <mx:Label x="619" y="360" text="Messages &amp; Alerts"/>
        <mx:TextArea x="619" y="389" width="259" height="112"/>
        
</mx:Canvas>

In the main application I am adding many of these custom components to
a VBOX, here is that code snippit

for (var i:int = 0; i<modelLocator.RoomModelCollection.length; i++){
                        var newRoom:RoomView = new RoomView()
                        newRoom.data = 
modelLocator.RoomModelCollection.getItemAt(i);
                        if(allRoomsBox) {
                                allRoomsBox.addChild(newRoom);
                        }
                }


Thanks for any help

Don