Question

我认为模板操作和组件中的事件之间存在问题。

据我了解，所有操作点击都将首先执行并冒泡。最后，组件中的事件也将被执行。有两个并行堆栈一个接一个地执行。

如果你在组件的模板中有这样的东西：

.AddMinutes

并在相应的javascript文件中：

Hello <button onclick={{action 'clickMe'}}>Click me</button>

您不确定是否会显示第二条消息。如果在操作堆栈中调用event.stopPropagation（）（在“clickMe”操作中不需要），则不会显示第二条消息。

这是一个小事：https://ember-twiddle.com/c9a014a0c19851596d5e1184c9967cbc

是否有解决方案可以绕过此问题？

Answer 1

我会反对@kumkanillam在他的回答中提出的建议：＆＃34;要解决此问题，您可以从<div onclick={{action 'clickMe'}}>移至<div {{action 'clickMe'}}>。＆＃34;

第一个（你在问题中使用的原始版本）是实施中的余烬closure action :)它更强大;这样您就可以将值从父组件返回到子组件;因为它实际上是一个函数，this上下文由ember正确设置在下面，您可以急切地检测未处理的操作。另一方面，@ kumkanillam建议的内容通常命名为＆＃34;元素空间中的动作＆＃34;。它是Ember的低级DOM事件处理。

请查看以下优秀的article，其中解释了closure actions摇滚的原因！关于你的问题;我建议尽可能多地使用closure actions，并通过将相关代码部分移动到动作处理中来避免DOM事件操作处理，如他在评论中已经提到的@DanielKmak。我个人更喜欢尽可能多地关闭闭包动作，并且当它不可避免时，它只依赖于DOM事件处理程序（例如click中的box-content和my-component中的Validator）。

Answer 2

当你说<button onclick={{action 'clickMe'}}>Click me</button> - 它与ember无关时，它为click事件注册了正常的函数。

当你说<button {{action 'clickMe'}}>Click me</button>时，Ember会控制（我不确定我在说什么，但一般来说，事件处理将由Ember处理）。

twiddle1 - Ember处理所有事件处理（即，<div {{action 'test'}}>然后您可以预期，事件从子组件传播

输出：

action click from my-child
click from my-child
action click from my-parent
click event from my-parent

整洁，这是预期的行为。即使你调用event.stopPropagation父组件，它也没有做任何事情。

twiddle 2 - 浏览器正在处理该事件，即。<div onclick={{action 'test'}}>

输出：

action click from my-child
action click from my-parent
click from my-child
click event from my-parent

在这里，您可以首先从触发操作单击从子节点到父节点，然后调用相应组件的单击处理程序。在这种情况下，如果在父动作单击处理程序中调用event.stopPropagation()，则ember将没有机会调用父/子组件的单击处理程序。

这是您遇到的问题，要解决此问题，您可以从<div onclick={{action 'clickMe'}}>转到<div {{action 'clickMe'}}>。

EmberJS - 如何不与组件中的操作和事件冲突

2 个答案: