使用多个实例时包含filterFunction问题的自定义组件

Question

我有一个主应用程序，它使用自定义MXML组件的两个实例。

我在自定义组件中包含了所有逻辑和查询，以查询MySQL并用结果填充ArrayCollection。

在我的第一个DropDownList中，我想显示数据库中所有可用的货币。

在第二个DropDownList中，我只想使用filterFunction显示CAD和美元货币。

我不知道为什么，但是一旦filterFunction应用到第一个元素，第二个动作就像他们共享相同的currenciesList变量(这是我的问题)。

Bindable for currenciesList需要绑定到my aSyncListView。

要在主应用程序中使用公共 for currenciesList是必需的。

不管我的变量是公共的还是私有的，我都有同样的错误.请查看此邮件末尾的输出。

在我的主要应用程序中的调用看起来像:

<mx:Form>
  <formElems:DropDownListCurrencies id="product_cost_price_curr"
    currencyCadUsdOnly="true"/>
  <formElems:DropDownListCurrencies id="product_price_curr"/>
</mx:Form>

现在是我的自定义组件:

<fx:Script>
    <![CDATA[
        import classes.SharedFunctions;

        import mx.collections.ArrayCollection;
        import mx.controls.Alert;
        import mx.events.FlexEvent;
        import mx.rpc.events.ResultEvent;

        [Bindable]
        public var currenciesList:ArrayCollection;

        public var currencyCadUsdOnly:Boolean = false;

        protected function dropdownlist1_creationCompleteHandler(event:FlexEvent):void
        {
            getAllCurrenciesResult.token = currenciesService.getAllCurrencies();

            // DEBUG just to show the id of the component
            trace('id:' + this.id + ' (getAllCurrencies)');
        }

        protected function getAllCurrenciesResult_resultHandler(event:ResultEvent):void
        {
            currenciesList = getAllCurrenciesResult.lastResult;

            // DEBUG before filterFunction
            trace('id:' + this.id + ', currencyCadUsdOnly:' + currencyCadUsdOnly + ', currenciesList.length:' + currenciesList.length + ' (BEFORE filterFunction)');

            if (currencyCadUsdOnly == true) {
                currenciesList.filterFunction = filterCadUsdOnly;
                currenciesList.refresh();
            }

            // DEBUG after filterFunction
            trace('id:' + this.id + ', currencyCadUsdOnly:' + currencyCadUsdOnly + ', currenciesList.length:' + currenciesList.length + ' (AFTER filterFunction)');
        }

        protected function filterCadUsdOnly(obj:Object):Boolean
        {
            return (obj.code == 'CAD' || obj.code == 'USD');
        }

    ]]>
</fx:Script>

<fx:Declarations>
    <s:CallResponder id="getAllCurrenciesResult" result="getAllCurrenciesResult_resultHandler(event)"/>
    <currenciesservice:CurrenciesService id="currenciesService" fault="SharedFunctions.showError(event.fault.faultString, event.fault.faultDetail)" showBusyCursor="true"/>
</fx:Declarations>

<s:AsyncListView list="{currenciesList}"/>

​

最后，让我们看看控制台输出。我期望在创建第二个组件时ArrayList的长度为7.:

id:product_prices_curr (getAllCurrencies)
id:product_cost_price_curr (getAllCurrencies)
id:product_prices_curr, currencyCadUsdOnly:true, currenciesList.length:7 (BEFORE filterFunction)
id:product_prices_curr, currencyCadUsdOnly:true, currenciesList.length:2 (AFTER filterFunction)
id:product_cost_price_curr, currencyCadUsdOnly:false, currenciesList.length:2 (BEFORE filterFunction)
id:product_cost_price_curr, currencyCadUsdOnly:false, currenciesList.length:2 (AFTER filterFunction)

谢谢你的帮助！

Answer 1

当您需要在具有不同过滤器的多个地方拥有相同的列表时，您需要的是一个ListCollectionView。这样，您就可以对其应用一个筛选器，而不会影响原始列表。它就像：

var secondList:ListCollectionView = new ListCollectionView(originalList);

您的secondList可以在不影响原始列表的情况下使用您喜欢的任何筛选器，在添加或从originalList中删除项时，还可以进行更新。

见此处：mx.collections.ListCollectionView

Answer 2

尝试将代码更改为以下内容：

        if (currencyCadUsdOnly == true) {
            currenciesList = new ArrayCollection(currenciesList.source);
            currenciesList.filterFunction = filterCadUsdOnly;
            currenciesList.refresh();
        }

希望这能有所帮助！