Question

我正在学习Ember，我遇到了一个我想解决的问题。

我有一个组件，它显示了X个按钮，这些按钮链接到组件上的操作。

当按下其中一个按钮时，应该执行正确的操作，并且在执行它时应该将新实例化的组件添加到另一个组件。

我意识到正确的方法不是让组件X了解组件Y，但正确的解决方案是什么样的？

Answer 1

我通过菊花链将动作从源组件链接到目标组件（我想要处理动作的那个）解决了我的问题。

组件JavaScript：

export default Ember.Component.extend({
  actions: {
    elementSelected: function(){
      this.sendAction('elementSelected', this.model);
    }
  }
});

定义动作不是严格要求的，它可以是javascript中实际调用sendAction的任何代码。 sendAction将事件暴露给组件外部的世界。

组件模板：

<div {{action 'elementSelected'}}>
</div>

链中的任何后续组件都需要将操作绑定到本地操作。该操作的实现与第一个组件几乎相同（请注意，我们现在通过原始操作传递任何对象）。

绑定：

{{component-some-component type="text" elementSelected="elementSelected"}}

实施：

export default Ember.Component.extend({
  actions: {
    elementSelected: function(model){
      this.sendAction('elementSelected', model);
    }
  }
});

此解决方案仍然存在一些问题： 1）链中的每个组件都需要明确地知道该动作。 2）详细程度在每个级别重新发送动作。

可悲的是，这与Ember 2.3＆lt;。

中目前的行动方式有很大关系

默认情况下，{{action}}帮助程序触发模板上的方法   控制器，如上图所示。

如果控制器没有实现与其名称相同的方法   动作在其动作对象中，动作将被发送到   路由器，当前活动的叶子路由将有机会   处理行动。

来源：https://guides.emberjs.com/v1.10.0/templates/actions/ （此特定链接适用于1.10，但这在2.3中仍然有效）

如上所述，操作不会在组件层次结构中冒泡，因此我的详细菊花链解决方案实际上是通过组件层次结构明确地冒泡特定事件。

这也可以通过服务或帮助程序类来解决，但在我看来，暴露给外部世界的组件操作应该在它们落入路径之前在组件链中冒泡。

via actions使用ember 2.0将组件添加到另一个组件

1 个答案: