Flex：在自定义组件中侦听CollectionEvent

Question

（编辑：我已经对我的问题进行了编辑，使其更简单，如果某些答案不在上下文中，对不起）

我为我的问题准备了一个简化的测试用例：

我正在尝试创建一个自定义组件，该组件将被来自服务器的XML数据馈入。 我的问题是，CollectionEvent侦听器不会被触发，因此标签不会更新-

Games.mxml （我的带有侦听器的自定义组件）：

<mx:Script>
    <![CDATA[
        import mx.events.*;

        private var _xlist:XMLList;

        [Bindable]
        public function get xlist():XMLList {
            return _xlist;
        }

        public function set xlist(x:XMLList):void {
            _xlist = x;
            trace("set(" + x +")");
            list.dataProvider = x;
            list.dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE, xlistChanged);                
        }

        private function gameLabel(item:Object):String {
            return "game: " + item.@label;
        }

        private function xlistChanged(event:CollectionEvent):void {
            trace("xlistChanged(" + event +")");
            all.text = "All games: " + _xlist.game.length();
            full.text = "Full games: " + _xlist.game.(user.length() == 3).length();
            vacant.text = "Vacant games: " + _xlist.game.(user.length() < 3).length();
        }
    ]]>
</mx:Script>

<mx:Label id="all" text="All games"/>
<mx:Label id="full" text="Full games"/>
<mx:Label id="vacant" text="Vacant games"/>

<mx:List id="list" labelFunction="gameLabel"/>

MyTest.mxml （单击按钮以更改XML）：

        private function changeXML1():void {
            games = <games>
                        <game label="1">
                            <user/>
                            <user/>
                            <user/>
                        </game>
                        <game label="2">
                            <user/>
                            <user/>
                        </game>
                        <game label="3">
                            <user/>
                            <user/>
                            <user/>
                        </game>
                    </games>;                   
        }

        private function changeXML2():void {
            games = <games>
                        <game label="A">
                            <user/>
                            <user/>
                            <user/>
                        </game>
                        <game label="B">
                            <user/>
                            <user/>
                        </game>
                        <game label="C">
                        </game>
                    </games>;                   
        }
    ]]>
</mx:Script>

<mx:XML id="games">
    <games>
        <game label="X">
            <user/>
            <user/>
        </game>
        <game label="Y">
            <user/>
            <user/>
        </game>
    </games>
</mx:XML>

<mx:Button label="Change XML 1" click="changeXML1()"/>
<mx:Button label="Change XML 2" click="changeXML2()"/>
<my:Games xlist="{games.game}"/>

请告诉我哪里错了。

问候，亚历克斯

更新：根据clownbaby的建议编辑了Games.mxml-仍然不起作用（从未调用xlistChanged）：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
         xmlns:my="*" creationComplete="onCreationComplete(event)">

    <mx:Script>
        <![CDATA[
            import mx.events.*;

            private var _xlist:XMLList;

            [Bindable]
            public function get xlist():XMLList {
                return _xlist;
            }

            public function set xlist(x:XMLList):void {
                _xlist = x;
                list.dataProvider = x;
                trace("\n set: " + x);
            }

            private function gameLabel(item:Object):String {
                return "game: " + item.@label;
            }

            private function onCreationComplete(event:FlexEvent):void {
                list.dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE, xlistChanged);
            }

            private function xlistChanged(event:CollectionEvent):void {
                all.text = "All games: " + xlist.length();
                full.text = "Full games: " + xlist.(user.length() == 3).length();
                vacant.text = "Vacant games: " + xlist.(user.length() < 3).length();
            }
        ]]>
    </mx:Script>

    <mx:Label id="all" text="All games"/>
    <mx:Label id="full" text="Full games"/>
    <mx:Label id="vacant" text="Vacant games"/>

    <mx:List id="list" labelFunction="gameLabel"/>

</mx:VBox>

Answer 1

两件事情：

1）您的事件未触发的原因是因为您在设置_xlist之后添加了侦听_xlist 。

2）无论如何，您都不应在设置器中添加事件侦听器。 您应该将其添加到VBox组件的initialize或creationComplete事件中。

编辑

好了，再次查看您的代码后，我可以看到问题了……所以再说几件事。

3）为什么要在creationComplete调用方法init时命名呢？ 您应该养成适当命名方法的习惯。 例如，被调用的方法creationComplete应该命名为： onCreationComplete ，或handleCreationComplete这样的话，你就会知道你的代码是做6个月的道路。

4）这是您的主要问题：您正在正确使用吸气剂/吸气剂。 如果您有一个setter，则还应该实现一个getter（除非您有一个只写字段）。 更重要的是，您应该使用吸气剂来访问数据。 在您的xListChanged方法中，您没有使用已定义的设置器，因此_xlist实际没有被更改。 因此，您应该将代码更改为：

private var _xlist:XMLListCollection;

[Bindable]
public function get xlist():XMLListCollection { return this._xlist; }
public function set xlist(value:XMLListCollection):void
{
    this._xlist = value;
}

每当您要访问_xlist ，请使用GETTER。 例如，将List组件的dataProvider更改为{xlist} 。 并且xListChanged方法应该使用getter： xlist而不是直接访问成员_xlist 。

Answer 2

您为什么不这样做：

公共功能集xlist（x：XMLList）：void {

  _xlist = new XMLListCollection(x); _all.label = 'All (' + _xlist.length + ')'; var full:XMLList = _xlist.source.game.(user.length() == 3); _full.label = 'Full (' + full.length() + ')'; var free:XMLList = _xlist.source.game.(user.length() < 3); _free.label = 'Free (' + free.length() + ')'; 

}

如果设置本地_xlist变量的唯一方法是设置xlist属性，则不需要侦听器。