Unbind mxml (curly brace) bindings in Flex

Flex developers love the inline curly brace bindings. We just cannot do without it but along with that comes the pain of performance and memory leaks. I will not talk about performance in this blog but I will show you how you can remove these bindings.

The first question is, why should I remove the bindings? Why doesn't this happen automatically? Lets understand this simple component and its references...

//MyComponent.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
 <mx:Script>
  <![CDATA[
   [Bindable] private var _firstName:String;
  ]]>
 </mx:Script>
 <mx:TextInput id="myTextInput" text="{_firstName}"/>
</mx:HBox>

What happens if another object someObj is listening to the myTextInput keyDown (or any other) event. Lets understand the references...
- MyComponent has a reference on myTextInput because it is a child of MyComponent.
- myTextInput has a reference on MyComponent because of the parent property and text binding.
- someObj has a reference on myTextInput because it is listening to the keyDown event (assuming it was not a weak event listener).

When you expect the MyComponent to get garbage collected, it won't because someObj references myTextInput and myTextInput references MyComponent. MyComponent will be garbage collected only if myTextInput's references to MyComponent are released. To make this happen, we will have to call MyComponent.removeAllChild() and remove all bindings. removeAllChild() is straight forward, lets look at bindings.

The right way to bind is through ActionScript. Keep a handle to the ChangeWatcher returned by BindingUtils.bindSetter() and BindingUtils.bindProperty(). When needed, just call changeWatcher.unwatch() and remove the binding. But there is no concept of changeWatchers in mxml bindings. So how do we release them?

Click here for a demo
View source: Right click demo, or download from here.

As you can see, once the binding is removed, the textInputs stop responding to the change. Before you scroll down to the complete code, lets understand what are these bindings, how do they look like and how to remove them.

Here is what an as3-generate binding looks like...

var result:Array = [];
var binding:Binding;

binding = new mx.binding.Binding(this,
    function():String
    {
        var result:* = (int1);
        var stringResult:String = (result == undefined ? null : String(result));
        return stringResult;
    },
    function(_sourceFunctionReturnValue:String):void
    {
        _testRemoveCurlyBraceBindings_Label2.text = _sourceFunctionReturnValue;
    },
    "_testRemoveCurlyBraceBindings_Label2.text"
);
result[0] = binding;

...
...
...
mx_internal::_bindings = mx_internal::_bindings.concat(bindings);
mx_internal::_watchers = mx_internal::_watchers.concat(watchers);

The Flex compiler generates this type of binding code in the as3-generated file and keeps adding it to the result array.

Every generated actionscript (from mxml component) also contains mx_internal::_bindings, mx_internal::_bindingsByDestination, mx_internal::_bindingsBeginWithWord and mx_internal::_watchers properties. I know this is enough information for you to open Flex/Flash Builder and start playing with the mx_internals. But you can save some time by reading a few lines more. These mx_internal variables contain the mxml/curly brace binding details and all you need to do is get rid of them. Here is the function I wrote that releases the mxml bindings.

   private function disposeAllCurlyBraceBindings():void {
             var i:int = 0;
             var len:int = 0;
 
             //tear bindings
             var myBindings:Array;
             var bindDestinations:Object;
             var bindBeginWithWord:Object;
             try {
                 myBindings = mx_internal::_bindings;
                 bindDestinations = mx_internal::_bindingsByDestination;
                 bindBeginWithWord = mx_internal::_bindingsBeginWithWord;
                 mx_internal::_bindings = null;
                 mx_internal::_bindingsByDestination = null;
                 mx_internal::_bindingsBeginWithWord = null;
             } catch (err:Error) {
                 trace("TEARDOWNVIEW_ERROR processing bindings");
             } finally {
              if (myBindings) {
                  len = myBindings.length;
                  for (i = 0; i < len; i++) {
                      var binding:Object = myBindings.pop();
  
                      if (binding) {
                          binding.mx_internal::isExecuting = false;
                          binding.mx_internal::isEnabled = false;
                          binding.mx_internal::isHandlingEvent = false;
                          binding.mx_internal::destFunc = null;
                          binding.mx_internal::srcFunc = null;
                          binding.mx_internal::destString = null;
                          binding.mx_internal::disabledRequests = null;
                          binding.twoWayCounterpart = null;
                          binding.uiComponentWatcher = -1;
                          binding.mx_internal::document = null;
                      }
                  }
              }
              deleteAllDynamicProperties(bindDestinations);
              deleteAllDynamicProperties(bindBeginWithWord);
             }
 
             //tear watchers
             var myWatchers:Array;
             try {
                 myWatchers = mx_internal::_watchers;
                 mx_internal::_watchers = null;
             } catch (err:Error) {
                 trace("TEARDOWNVIEW_ERROR processing watchers");
             } finally {
              if (myWatchers) {
                  len = myWatchers.length;
                  for (i = 0; i < len; i++) {
                      var watcher:Object = myWatchers.pop();
  
                      if (watcher) {
                          if (watcher.hasOwnProperty("value")) {
                              watcher["value"] = null;
                          }
                      }
                  }
              }
           }
         }
   
         private function deleteAllDynamicProperties(obj:Object):void {
             if (!obj) {
                 return;
             }
 
             for (var str:String in obj) {
                 delete obj[str];
             }
         }      

Explanation:
Get a handle to the mx_internal binding properties. Do this in a try/catch block because some ui components like Repeater and ActionScript components do not contain these properties. If they exist than set their internal properties to null. Also set the mx_internal bindings to null.


I am working on a project where almost all the custom components leak. Every component I profiled had 100-350 references. It was alomost impossible to analyze so many references, cross references and circular references. I have written a generic method that tears down the view (as much as possible) and removes most of the references. After calling this method, my reference count came down to 10-20. This helped me immensely in the reference analysis and fixing the memory leaks.

Also read my blog on removing mxml/inline event listeners and how to get rid of them.