Apache flex Flex 4集合\u更改事件未触发

我目前正在尝试实现ArrayCollection对象的双向绑定。但是，集合_更改事件未触发

App.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               xmlns:components="components.*"
               creationComplete="handleCreationComplete(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var booths:ArrayCollection;              

            public function handleCreationComplete(event:Event):void
            {
                // ADD SOME BOOTHS
                booths = new ArrayCollection();
                booths.addItem( "item1" );
                booths.addItem( "item2" );
            }

        ]]>
    </fx:Script>

    <components:FloorplanGrid id="grid" width="400" height="300" booths="{booths}" />
</s:Application>

---

我试图用Booths变量实现双向绑定。但是，即使我在App.mxml的Booths变量中添加了2个新项目，COLLECTION_CHANGE事件也不会触发。问题是您已订阅此集合的collectionChange事件：

public var booths:ArrayCollection = new ArrayCollection();

但是：

<components:FloorplanGrid id="grid" width="400" height="300" booths="{booths}" />

您已传递其他未订阅事件的集合

您可以将代码更改为以下内容：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               xmlns:components="components.*"
               creationComplete="handleCreationComplete(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            public function handleCreationComplete(event:Event):void
            {
                // ADD SOME BOOTHS
                grid.booths.addItem( "item1" );
                grid.booths.addItem( "item2" );
            }

        ]]>
    </fx:Script>

    <components:FloorplanGrid id="grid" width="400" height="300" />
</s:Application>

---

或者在

FloorplanGrid

端使用subscribe/unsubscribe逻辑创建getter。

我认为问题不在于事件没有触发。相反，我认为正在发生的是，您正在侦听在变量声明中设置的原始ArrayCollection，而不是应用程序中绑定传入的ArrayCollection

使用getter/setter对：

protectect var _booths:ArrayCollection;

[Bindable]
public function get booths():ArrayCollection {
     return _booths;
}

public function set booths(value:ArrayCollection):void {
    if (value != _booths) {
        if (_booths != null) {
            _booths.removeEventListener(CollectionEvent.COLLECTION_CHANGE, handleBoothChange);
        }
        _booths=value;
        if (_booths != null) {
            _booths.addEventListener(CollectionEvent.COLLECTION_CHANGE, handleBoothChange);
        }
        handleBoothChange(null);
    }
}

请注意，如果手动处理集合更改，则可能不需要将此设置为可绑定

---

如果您使用的是FB 4.5，您可能想考虑将它设置为模板——我使用这种逻辑足以让我拥有它自己的模板。makegetter/setter对还可以，但它没有检查从旧实例中删除侦听器并添加新的onw。

我不确定从哪里开始

绑定在Flex事件系统上工作；因此，当绑定升级时，它不是即时/同步的。看看这些代码段：

        public function handleCreationComplete(event:Event):void
        {
            booths = new ArrayCollection();
            booths.addItem( "item1" );
            booths.addItem( "item2" );
        }

<components:FloorplanGrid id="grid" width="400" height="300" booths="{booths}" />

因此，您正在侦听组件内部创建的“new ArrayCollection（）”对象上的事件。更改booths属性时，未向新值添加事件侦听器；因此，游戏中没有事件侦听器

您可能想将booths属性更改为get/set属性。像这样：

        private var _booths:ArrayCollection;  
        [Bindable]
        public function get booths():ArrayCollection{
            return _booths;
        }
        public function set booths(value:ArrayCollection):void{
           if(_booths){
           _booths.removeEventListener(CollectionEvent.COLLECTION_CHANGE, handleBoothsChange);
           }
           _booths = value;
           if(_booths){
            _booths.addEventListener(CollectionEvent.COLLECTION_CHANGE, handleBoothsChange);
           }
        }

删除事件侦听器并重新添加它将有助于防止应用程序中的内存泄漏。因为应用程序中不会有错误的侦听器阻止旧值被垃圾收集

    public function FloorplanGrid()
    {
        booths.addEventListener(CollectionEvent.COLLECTION_CHANGE, handleBoothsChange);
        super();
    }

        private var _booths:ArrayCollection;  
        [Bindable]
        public function get booths():ArrayCollection{
            return _booths;
        }
        public function set booths(value:ArrayCollection):void{
           if(_booths){
           _booths.removeEventListener(CollectionEvent.COLLECTION_CHANGE, handleBoothsChange);
           }
           _booths = value;
           if(_booths){
            _booths.addEventListener(CollectionEvent.COLLECTION_CHANGE, handleBoothsChange);
           }
        }