marko icon indicating copy to clipboard operation
marko copied to clipboard

Forward event from children to parent

Open cc-ebay opened this issue 3 years ago • 1 comments

Description

It would be good to have some syntactic sugar to forward the event up.

Why

Since in marko.js the custom events do not automatically bubble up, it would be great not having to waste time writing a boilerplate function to just do:

onMyEventOnChild(param1, param2, param3) { 
   this.emit('myEvent' , param1, param2, param3);
}

Possible Implementation & Open Questions

I have seen people adding "emit" directly inside on-* but unfortunately you are not able to retrieve the parameters of the event.

<input type="email" name=input.name on-change("emit", "email-change", { email: ???event.target.value })/>

In this case we wanted to massage the data and event is not accessible. But ideally if there is no massaging of parameters we should be able to write something like:

<my-child-component on-my-event("pass-through")/>

That should be equivalent to:

my-component-in-the-middle.marko

class {
  handleMyEvent(...args) {
      this.emit("myEvent", ...args);
  }
}

<my-child-component on-my-event("handleMyEvent")/>

Is this something you're interested in working on?

I do not know enough about marko internals

cc-ebay avatar Dec 01 '21 10:12 cc-ebay

FWIW in Marko 6 (and the tags api preview) we've moved away from directly attaching event listeners to instead pass functions around similar to other frameworks. This means that you can spread input/attributes and have the event handlers propagate to the child as well.

A long while ago we also talked about a potential way to allow bubbling events in the current system, something like:


// same as onClick("emit", "click")
<input bubble:click/>

// same as onClick("emit", "input-click")
<input bubble:click="input-click"/>

// no current equivalent. allow the parent to attach event handlers to the input directly.
<input bubble/>

// no current equivalent. allow parent to attach event handlers to input directly, but only ones prefixed with (in this case) "input"
// eg from the parent onInputClick("...")
<input bubble="input"/>

DylanPiercey avatar Dec 01 '21 15:12 DylanPiercey