代码之家  ›  专栏  ›  技术社区  ›  JoSch

Gia:如何通过eventbus将事件对象传递给handler

  •  0
  • JoSch  · 技术社区  · 4 年前

    我正在学习如何与 Gia (对于小型web项目)我无法找到如何通过Gia的eventbus将事件对象从一个组件传递到另一个组件的事件处理程序。

    以下是两个基本组件,通过eventbus进行通信:

    class navigation extends Component {
      constructor(element) {
        super(element);
        //
        // Define "Sub-components"
        this.ref = {
          navLinks: [],
        };
      }
    
      mount() {
        //
        // Listen for clicks on nav.-links
        for (let i = 0; i < this.ref.navLinks.length; i++) {
          const link = this.ref.navLinks[i];
          link.addEventListener("click", this.handleNavLinkClick.bind(this));
        }
      }
    
      handleNavLinkClick(e) {
        //
        // Emit event
        let clickedLink = e.target;
        if (clickedLink.classList.contains("callHeader")) {
          eventbus.emit("callingSubpageHeader");
        }
      }
    }
    
    class subpageHeader extends Component {
      mount() {
        //
        // Listen for call from eventbus
        eventbus.on(
          "callingSubpageHeader",
          this.handleEventBusCall_callHeader.bind(this)
        );
      }
      //
      // Eventbus handler(s)
      handleEventBusCall_callHeader() {
        console.log("The subpage-header was called.");
      }
    }
    

    事件的发出和第二个组件内处理程序的后续调用工作正常。但我想在调用处理程序时将附加信息从第一个组件传递到第二个组件。 The Gia documentation mentions that the emit method of the eventbus can pass an eventObject 致经办人:

    调用以前使用相同事件名注册的任何处理程序。 可选事件对象可以用作参数,该参数将被传递 变成一个处理程序作为参数。

    eventbus.emit('eventName'[, eventObject]);
    

    不幸的是,没有示例,我不知道如何传递对象。我试图将“something”(在本例中是在第一个组件中单击的链接)添加到emit函数的调用中,但不知道如何/在何处可以读取/使用它,也不知道将某物作为eventObject传递是否这样工作:

    class navigation extends Component {
      constructor(element) {
        super(element);
        //
        // Define "Sub-components"
        this.ref = {
          navLinks: [],
        };
      }
    
      mount() {
        //
        // Listen for clicks on nav.-links
        for (let i = 0; i < this.ref.navLinks.length; i++) {
          const link = this.ref.navLinks[i];
          link.addEventListener("click", this.handleNavLinkClick.bind(this));
        }
      }
    
      handleNavLinkClick(e) {
        //
        // Emit event
        if (clickedLink.classList.contains("callHeader")) {
          eventbus.emit("callingSubpageHeader", [e.target]);
        }
      }
    }
    

    1 回复  |  直到 4 年前
        1
  •  1
  •   Rodentman87    4 年前

    事件处理程序作为参数从事件中传递对象,因此您的处理程序可以从其函数签名中将该对象作为变量获取,如下所示:

    handleEventBusCall_callHeader(target) {
      console.log("The subpage-header was called.");
    }
    

    变量 target 事件处理程序的内部现在等于随事件传递的对象。

    当你召集这个活动时,你不需要把你的论点放进去 [] ,这只会在传递它之前将其放入数组中,这将在以后给您带来麻烦。文档中的括号只显示 eventbus.emit 是可选的。