3

以下是我在 EmberJS GitHub 上发布的一个问题,但 Stack Overflow 比 GitHub 更适合讨论。

我目前正在构建一些复杂的组件,包括复合组件,并且遇到了存在极端隔离组件的障碍。在某些情况下,我不需要组件来触发控制器上的操作,但是控制器需要触发组件的行为更改。问题是组件不知道控制器并且控制器也没有创建组件:它们是在模板中定义的。

Ember.Component我通过对类进行子类化以提供一种让消息通过组件的方式解决了这个问题。

新的组件子类打破了不应该知道外部控制器的组件的故意隔离。我发现从外部调用组件方法的 2 个侵入性较小的选项是:

  • 在全局数组中缓存组件/实例对的名称,例如 App.components,然后调用组件方法 App.components['name'].method()
  • 从外部触发事件,在组件中注册和处理它们。但是在这种情况下,我将一个eventSource对象传递给组件,通常是这样的控制器:{{my-component eventSource=controller}}

我的问题是关于我们如何以对组件来说最优雅和侵入性最小的方式来解决这个问题?为了实现复合组件,使用像乐高积木这样的组件,目前我似乎不可能看到我们如何在不破坏组件隔离的情况下实现该目标。

非常欢迎任何输入、想法、解决方案、讨论。

注意:顺便说一下,打破组件隔离的第一种方法是受到对 ember-bootstrap 组件所做工作的启发:https ://github.com/ember-addons/bootstrap-for-ember 作者不得不解决同样的问题是能够从外部触发组件内部的方法。

另一个注意事项:为了记录,访问组件的另一种方法是使用Ember.View.views['name']where name 是您为组件提供的视图名称。但是,我觉得拨打这样的电话很脏,甚至更多的是来自控制器。

4

1 回答 1

3

一般来说,我会尝试通过将属性绑定到您的组件来解决这个问题,然后可以根据计算的属性或基于这些属性的观察者进行更改。

例如,与其尝试调用deactivate组件上的方法,不如将属性绑定active到模板中的属性:

{{my-component active=formEnabled}}

我很犹豫是否建议将eventSource组件传递为通用解决方案(例如您的{{my-component eventSource=controller}}示例)。我想这可以与只发出特定事件并与您的组件紧密耦合的类或 mixin 一起使用,但我正在努力想出一个证明这种方法的用例。

于 2013-11-14T14:38:27.853 回答