Question

简要说明：我正在使用Flex 3.5。

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

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

我搜索了一个稍微不同的事件（例如'changing'或'startChange'），我可以在其上调用stopPropagation（）方法（因为常规的'change'事件不可取消），但树中不存在成分

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

我还想使用一个不同的组件，比如Menu（我也发现了一个垂直菜单的实现），但这似乎没有帮助。那里也会存在同样的问题。

有没有正确的方法呢？必须有一个阻止更改过程提交的最佳实践！

Answer 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;
    }

}
}

Answer 2

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

与Maxim一样，我扩展了Tree组件并覆盖了isItemSelectable（）方法以检查指定项的此属性，这样就可以阻止更改过程。

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

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

谢谢，丹尼尔

Flex取消树上的更改事件

2 个答案: