How do I implement data binding in an ActionScript Class?

Question

I am having a problem with binding values in my ActionScript components. I basically want to set the value of a a variable in my component to a value in the model, and have the component variable automatically update when the model value is updated. I think that I just don't fully understand how data binding works in Flex - this is not a problem when using MXML components, but, when using ActionScript classes, the binding does not work.

This is the code I'm using, where the values are not binding:

package
{
    public class Type1Lists extends TwoLists
    {
        public function Type1Lists()
        {
            super();

            super.availableEntities = super.composite.availableType1Entities;

            super.selectedEntities = super.composite.selectedType1Entities;
        }
    }
}

package
{
    public class Type2Lists extends TwoLists
    {
        public function Type2Lists()
        {
            super();

            super.availableEntities = super.composite.availableType2Entities;

            super.selectedEntities = super.composite.selectedType2Entities;
        }
    }
}

/* TwoLists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
    <mx:Script>
        <![CDATA[
            public var __model:ModelLocator = ModelLocator.getInstance();

            public var composite:Composite = 
                __model.selectedComposite;

            [Bindable]
            public var availableEntities:ArrayCollection;

            [Bindable]
            public var selectedEntities:ArrayCollection;
        ]]>
    </mx:Script>

    <mx:List id="availableEntitiesList" dataProvider="{availableEntities}" />

    <mx:List id="selectedEntitiesList" dataProvider="{selectedEntities}" />
</mx:HBox>

Answer 1

To use binding by code you should use mx.binding.utils.*

Take a look and the BindingUtils.bindProperty and bindSetter methods.

Also, be careful with manual databinding, it could lead you to memory leaks. To avoid them, save the ChangeWatcher returned by bindProperty and bindSetter and call watcher's unwatch method when is no more used (i.e, in the dipose or destructor method)

Answer 2

You need to add the [Bindable] tag either to the class itself (making all properties bindable) or the properties you want to be [Bindable]. Marking properties or objects as [Bindable] in your MXML is not sufficient.

Answer 3

To fix this, I simply converted the classes to MXML components, and added a private variable for my ModelLocator.

/* Type1Lists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<TwoLists xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns="*" 
    availableEntities="{__model.selectedComposite.availableType1Entities}" 
    selectedEntities="{__model.selectedComposite.selectedType1Entities}">
    <mx:Script>
        <![CDATA[
            import model.ModelLocator;

            [Bindable]
            private var __model:ModelLocator = ModelLocator.getInstance();
    </mx:Script>
</TwoLists>

/* Type2Lists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<TwoLists xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns="*" 
    availableEntities="{__model.selectedComposite.availableType2Entities}" 
    selectedEntities="{__model.selectedComposite.selectedType2Entities}">
    <mx:Script>
        <![CDATA[
            import model.ModelLocator;

            [Bindable]
            private var __model:ModelLocator = ModelLocator.getInstance();
    </mx:Script>
</TwoLists>