Flex自定义事件分派和视听堆栈收听

Question

我有一个关于事件分派和分派在Flex中的问题。

我的目标是传递一个组件（Comp1）中捕获的电子邮件地址并传递给另一个组件（Comp2）。这两个组件是viewstack的导航器内容。自定义事件从Comp1正确地发送了电子邮件，但无法到达Comp2。应用程序（主）看起来像：

<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> 

的组合物2看起来像

<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样子

包事件 { 进口对象类型：flash.events.Event; public class LoginEventComplete extends 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; 
} 

}}

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

最佳大卫W¯¯

Answer 1

你认识的，任何层次视图结构具有传递信息的问题之一。这个问题可以通过几种方式解决，但我觉得我应该告诉你，如果你的应用程序将变得很大，你可能需要研究一个应用程序框架。像Parsley或RobotLegs。

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

一个简单的办法是创建一个模型（即只具有公共属性来存储信息的一类）是绑定的父和绑定到两个兄弟姐妹。那么如果一个人改变了信息，另一个人可以接收到相同的信息（或使用绑定）。

例如：

<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的公共方法的情况下的主要成分。这可能是最简单的路线。

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