How to pass an Event Listener as a Dynamic Attribute in Marko?

Question

I'm trying to create a form in Marko and for the inputs I'm using a component that will create the inputs and will handle the validation. The hole problem is when I try to pass an event listener as a dynamic attribute.

I have an array of fields as objects, containing the type, id and, if the field has to be checked, an attribute object with the handler function.

$ const fields= [
   {
    type: 'email',
    id: 'exampleEmail',
    atrrs: {
      'on-change' : 'check'
    }
  '},
.
.
.
]

<for|field| of=fields>
   <input type=`${field.type}` id=`${field.id}` ...field.attrs>
</for>

The output should be:

<input type='email' id='exampleEmail' on-change('check')>

But instead I'm having:

<input type='email' id='exampleEmail' on-change='check'>

And if I try to pass the attribute as a string instead of an object I get a Migration and a deprecation warning:

MIGRATION The "${attributes}" is deprecated. Please use "...attributes" modifier instead

WARNING!! "Passing a string as dynamic attributes ('<div ${string}>' or '<div ...string>') is deprecated, use an object instead."

Answer 1

Marko does not currently support spreading event listeners into a tag. We are looking at a couple different options to solve this and will likely have a solution in the near future.

For now, to enable a parent to listen to events from a DOM node in its child, you must re-emit the event from the child component. The most concise way of doing this is to set the built-in emit method as the handler for the event:

<button on-click("emit", "my-click")/>

This will re-emit the button click as a "my-click" event on the component. You could, of course, re-emit it with the same event name. You'll need to do this for every event that you want the parent to be able to listen to.