Question

我在flex中有一个关于事件调度和调度的问题。

我的目标是传递在一个组件（Comp1）中捕获的电子邮件地址，并传递给另一个组件（Comp2）。这两个组件是视图堆栈的导航器内容。自定义事件从Comp1正确分派了电子邮件，但不知何故无法访问Comp2。应用程序（Main）看起来像：

<fx:Script>
    <![CDATA[
        import events.LoginEventComplete;

        protected function loginHandler(event:LoginEventComplete):void
        {
            myViewStack.selectedChild = idViewMain;
        }
    ]]>
</fx:Script>

<s:Panel width="100%" height="100%">
    <mx:ViewStack id="myViewStack" selectedIndex="0" width="100%" height="100%">
        <views:Comp1 id="idViewLogin" login="loginHandler(event)"/>
        <views:Comp2 id="idViewMain"/>
    </mx:ViewStack>
</s:Panel>

Comp1看起来像

<fx:Metadata>
    [Event(name="login", type="events.LoginEventComplete")]
</fx:Metadata>
<fx:Script>
    <![CDATA[
        import events.LoginEventComplete;

        protected function bnLogIn_clickHandler(event:MouseEvent):void{
            var e:LoginEventComplete = new LoginEventComplete("login");
            e.workemail = tiWorkEmail.text;
            dispatchEvent(e);
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:layout>
    <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>

<s:Panel width="400" height="500">
    <s:Label text="Email" x="130" y="150"/>
    <s:TextInput id="tiWorkEmail" top="140" left="180" right="60"/>
    <s:Button 
        id="bnLogIn"
        label="Log In"
        top="220" left="180"
        click="bnLogIn_clickHandler(event)"/>
</s:Panel>

Comp2看起来像

<fx:Script>
    <![CDATA[
        import events.LoginEventComplete;

        import valueObjects.Employee;

        protected function init():void
        {
            this.addEventListener(LoginEventComplete.LOGIN, mainHandler);
        }

        private function mainHandler(event:LoginEventComplete):void{
            tiWorkEmail.text = event.workemail;
        }

    ]]>
</fx:Script>

<fx:Declarations>

</fx:Declarations>

<s:layout>
    <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>

<s:Label id="idWorkEmail" text="Email"/>
<s:TextInput id="tiWorkEmail"/>

自定义事件LoginEventComplete看起来像

包事件 { import flash.events.Event; 公共类LoginEventComplete扩展了Event { public var workemail：String;

public static const LOGIN:String = "login";

public function LoginEventComplete(type:String)
{
  super(type, true, false);
  this.workemail = workemail; 
}

override public function clone():Event
{
  var newEvent:LoginEventComplete = new LoginEventComplete(type);
  newEvent.workemail = workemail;
  return newEvent;
}

} }

有人可以帮忙吗？非常感谢！

最佳David W

Answer 1

您正在意识到任何分层视图结构必须传递信息的问题之一。这个问题可以通过几种方式解决，但我觉得我应该告诉你，如果你的应用程序变得很大，你可能需要查看一个应用程序框架。一个像Parsley或RobotLegs。

现在，解决方案。您将无法使用冒泡从一个兄弟组件转到另一个兄弟组件，因为冒泡 up 显示列表（子级到父级等等）。您可以在公共父级上侦听事件，然后将信息推送到其他兄弟中，但这会在父容器上添加大量逻辑。

一个简单的解决方法是创建一个模型（一个只有公共属性来存储信息的类），该模型可以绑定在父级上并绑定到两个兄弟中。然后，如果更改信息，另一个可以接收相同的信息（或使用绑定）。

例如：

<fx:Script>
    <![CDATA[
        import events.LoginEventComplete;

        [Bindable] private var someData:SomeModel = new SomeModel();

        protected function loginHandler(event:LoginEventComplete):void
        {
            myViewStack.selectedChild = idViewMain;
        }
    ]]>
</fx:Script>

<s:Panel width="100%" height="100%">
    <mx:ViewStack id="myViewStack" selectedIndex="0" width="100%" height="100%">
        <views:Comp1 id="idViewLogin" login="loginHandler(event)" data="{someData}/>
        <views:Comp2 id="idViewMain" data="{someData}/>
    </mx:ViewStack>
</s:Panel>

Answer 2

我可以告诉你，调度事件只会向上移动层次结构链。听起来，基于您的第一个代码段，您正试图让它横向移动。

<mx:ViewStack id="myViewStack" selectedIndex="0" width="100%" height="100%">
    <views:Comp1 id="idViewLogin" login="loginHandler(event)"/>
    <views:Comp2 id="idViewMain"/>
</mx:ViewStack>

因此，一种解决方案是在事件的主要组件中有一个侦听器，然后在comp2中执行公共方法。这可能是最简单的路线。

另一种解决方案可能是将值存储在全局对象中;这两个组件都有引用。

Flex自定义事件调度和使用viewstack监听

2 个答案: