Flex 取消树上的更改事件答案

【问题标题】：Flex cancel a change event on a TreeFlex 取消树上的更改事件
【发布时间】：2010-06-30 06:12:35
【问题描述】：

简要说明：我使用的是 Flex 3.5。

我有一个 Tree 组件，用作不同“页面”之间的导航菜单。当用户单击菜单中的某个选项时，我通过在应用程序中的状态组件之间切换来切换“页面”。问题是，当用户确实单击菜单中的选项时，我想对某个组件中的某些信息进行验证。如果验证失败，我会显示警报，并且我想阻止导航到其他页面。其中一部分是根本不改变文档的 currentState，但是树组件仍然会发生更改事件，结果是页面 A 仍然显示在屏幕上，而树中的选定选项是页面 B (用户想要导航到的位置，但由于某些信息无效而失败）。

我试图弄清楚如何取消树组件本身的更改事件。我的想法不太适合：

我搜索了一个稍微不同的事件（例如“更改”或“开始更改”），我可以在该事件上调用 stopPropagation() 方法（因为常规的“更改”事件不可取消），但树不存在组件。

我还考虑过总是自己保存在 Tree 组件中选择的当前选项，当验证失败时，我会将 Tree 的 selectedItem 设置为该保存的选项。这也很丑陋，因为这样的操作会在树上引发另一个更改事件，从而对状态组件进行另一个更改，以及我已经在其中的页面的另一个填充。那是我真的不想做的事情。

我也考虑过使用不同的组件，例如菜单（我还找到了垂直菜单的实现），但这似乎没有帮助。那里也会存在同样的问题。

有没有合适的方法来做到这一点？必须有防止更改过程提交的最佳实践！

【问题讨论】：

标签： apache-flex events tree

【解决方案1】：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.events.ListEvent;

        private function tree_changeHandler(event:ListEvent):void
        {
            trace("Change, selectedItem.label is: " + tree.selectedItem.label);
        }

        protected function tree_itemClickHandler(event:ListEvent):void
        {
            var data:Object = event.itemRenderer.data;
            if (!tree.isItemSelectable(data))
                Alert.show("Item \"" + data.label + "\" is not selectable");
        }

    ]]>
    </mx:Script>

    <local:MyTree id="tree" change="tree_changeHandler(event)" itemClick="tree_itemClickHandler(event)">
        <local:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Label 1"/>
                <mx:Object label="Label 2"/>
                <mx:Object label="Label 3 (non-selectable)"/>
                <mx:Object label="Label 4"/>
            </mx:ArrayCollection>
        </local:dataProvider>
    </local:MyTree>

</mx:Application>

MyTree.as 的来源：

package
{
import mx.controls.Tree;

public class MyTree extends Tree
{

    override public function isItemSelectable(data:Object):Boolean
    {
        if (!super.isItemSelectable(data))
            return false;

        var label:String = data.label;
        if (label.indexOf("non-selectable") >= 0)
            return false;

        return true;
    }

}
}

【讨论】：

【解决方案2】：

最终我找到了放置确定每个项目的可选项性的代码的地方：当应该验证的信息发生更改时，我执行验证，并根据其结果为树中的所有项目设置一个属性组件，指示它们是否可以导航到。如果验证成功，则属性设置为允许导航，如果不成功，则设置为不允许导航。

和 Maxim 一样，我扩展了 Tree 组件并覆盖了 isItemSelectable() 方法来检查指定项的此属性，这样可以防止更改过程。

持有待验证信息的视图和持有 Tree 组件的视图（它们不一定是同一个视图）之间的访问是通过持有这两个视图的 Presentor 类完成的（我使用 MVP机制）。这不是最优雅的设计，但它比我能想到的任何其他东西都要好得多。所谓的设计问题是视图之间的耦合和演示者的复杂性，它必须处理多个视图并且具有与视图之间的交互相关的方法（而不是表示特定动作的方法）看法）。问题是在业务方面，这两个视图是耦合的（因为一个中的信息会影响另一个中的导航树），因此演示者在它们之间耦合。耦合也是通过presentor的接口完成的，这样每个view都不会真正“知道”另一个view。

我希望它可以帮助其他人。

谢谢，丹尼尔

【讨论】：