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">
    <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>

Alfz · Accepted Answer · 2008-12-22 16:03:21Z

2

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)

answered Dec 22, 2008 at 16:03

Alfz

978 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cliff.meyers · Accepted Answer · 2008-12-22 16:18:14Z

1

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.

answered Dec 22, 2008 at 16:18

cliff.meyers

17.8k6 gold badges54 silver badges68 bronze badges

Comments

Eric Belair · Accepted Answer · 2009-01-23 22:27:29Z

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>

Collectives™ on Stack Overflow

How do I implement data binding in an ActionScript Class?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related