如何在ActionScript类中实现数据绑定?

时间:2022-01-29 19:34:47

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.

我在ActionScript组件中绑定值时遇到问题。我基本上想要将组件中变量的值设置为模型中的值,并在更新模型值时自动更新组件变量。我认为我还没有完全理解数据绑定在Flex中是如何工作的 - 这在使用MXML组件时不是问题,但是,当使用ActionScript类时,绑定不起作用。

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>

3 个解决方案

#1


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

要使用代码绑定,您应该使用mx.binding.utils。*

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

看一下BindingUtils.bindProperty和bindSetter方法。

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)

另外,小心手动数据绑定,它可能会导致内存泄漏。为了避免它们,保存bindProperty和bindSetter返回的ChangeWatcher,并在不再使用时调用watcher的unwatch方法(即,在dipose或析构函数方法中)

#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.

您需要将[Bindable]标记添加到类本身(使所有属性可绑定)或您想要的属性[Bindable]。在MXML中将属性或对象标记为[Bindable]是不够的。

#3


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

为了解决这个问题,我简单地将类转换为MXML组件,并为我的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>

#1


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

要使用代码绑定,您应该使用mx.binding.utils。*

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

看一下BindingUtils.bindProperty和bindSetter方法。

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)

另外,小心手动数据绑定,它可能会导致内存泄漏。为了避免它们,保存bindProperty和bindSetter返回的ChangeWatcher,并在不再使用时调用watcher的unwatch方法(即,在dipose或析构函数方法中)

#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.

您需要将[Bindable]标记添加到类本身(使所有属性可绑定)或您想要的属性[Bindable]。在MXML中将属性或对象标记为[Bindable]是不够的。

#3


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

为了解决这个问题,我简单地将类转换为MXML组件,并为我的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>