closures with popups using flex 4.6

Question

I have this custom event handler that shows a popup and accepts input from the user:

        private var mySkinnablePopupContainer:MySkinnablePopupContainer;

        private function handleShowGridPopupEvent(event:ShowGridPopupEvent):void {

              var mouseDownOutSideHandler:Function = function(mdEvent:FlexMouseEvent):void {
                    // At this point, event.targetControl contains the wrong object (usually the previous targetControl)
                    if (mdEvent.relatedObject != event.targetControl) {                           
                          mySkinnablePopupContainer.close();
                    }
              }

              var gridPopupSelectionHandler:Function = function(popEvent:PopUpEvent):void { 
                    if (!popEvent.commit) return;                        
                    // At this point, event.targetData contains the wrong object (usually the previous targetData)
                    myModel.doSomethingWithData(popEvent.data.selectedItem, event.targetData);
              }

              if (!mySkinnablePopupContainer) {
                    mySkinnablePopupContainer = new MySkinnablePopupContainer();                     
                    mySkinnablePopupContainer.addEventListener(PopUpEvent.CLOSE, gridPopupSelectionHandler);
                    mySkinnablePopupContainer.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, mouseDownOutSideHandler);
              } 

              // At this point, event.targetData contains the correct object          
              mySkinnablePopupContainer.dataProvider = getMyDPArrayCollection(event.targetData);
              mySkinnablePopupContainer.open(this);

              var point:Point = event.targetControl.localToGlobal(new Point());             
              mySkinnablePopupContainer.x = point.x + event.targetControl.width - mySkinnablePopupContainer.width;
              mySkinnablePopupContainer.y = point.y + event.targetControl.height;                                                                                             
        }

Every time the function handler gets called, it will have the correct ShowGridPopupEvent object but by the time it calls the gridPopupSelectionHandler, it will contain the old object from a previous call. It works the first time, subsequent calls fails. Somehow the reference to the event object changed somewhere in between before opening the popup and after. Any idea what am I doing wrong here? Is this a bug with flex?

Looks like a scoping issue to me. From the top of my head: I think it should suffice to create a reference to those two variables in the outer function scope and access that instead (var data:MyData = event.targetData;). Note that with this coding style (nested event handlers and all), you're making you're code (a) harder to read and debug and (b) prone to this type of scoping issues. — RIAstar

StephenNYC StephenNYC · Accepted Answer · 2014-04-22T14:02:22

found the prob. since im attaching listener only once, it will reference the old listener, with the reference to the old data. i guess i was expecting its reference to be updated whenever i create the closure. not in this case. possible fix is to remove the listener and re-add it again but I abandoned the idea of using closures, and aside from what RIAStar mentioned, it is also impractical as it only gives more overhead by creating a new function for every invocation of the handler.

closures with popups using flex 4.6

1 Answers