如何在 Marko 中将事件侦听器作为动态属性传递？

Question

我正在尝试在 Marko 中创建一个表单，对于输入，我正在使用一个组件来创建输入并处理验证。 漏洞问题是当我尝试将事件侦听器作为动态属性传递时。

我有一个字段数组作为对象，包含类型、id，如果必须检查字段，还有一个带有处理函数的属性对象。

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

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

输出应该是：

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

但我却有：

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

如果我尝试将属性作为字符串而不是对象传递，我会收到迁移和弃用警告：

迁移 “${attributes}”已被弃用。请改用“...属性”修饰符

警告！！ “不推荐将字符串作为动态属性 ('<div ${string}>' or '<div ...string>') 传递，请改用对象。”

Answer 1

Marko 目前不支持将事件侦听器传播到标签中。我们正在寻找几种不同的方案来解决这个问题，并且可能会在不久的将来找到解决方案。

现在，要使父组件能够在其子组件中侦听来自 DOM 节点的事件，您必须从子组件重新发出事件。最简洁的方法是将内置的emit 方法设置为事件的处理程序：

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

这将重新发出按钮单击作为组件上的“my-click”事件。当然，您可以使用相同的事件名称重新发出它。您需要为希望父母能够收听的每个事件执行此操作。