javascript - EmberJS - 使用几个解决方案从外部调用组件方法(征集讨论)

Question

以下内容来 self 在 EmberJS GitHub 上发布的一个问题，但 Stack Overflow 比 GitHub 更适合讨论。

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

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

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

• 在全局数组中缓存组件/实例对的名称，例如App.components，然后调用一个组件方法App.components['name'].method()
• 从外部触发事件，在成分。但是在那种情况下，我将传递一个 eventSource 对象到组件，通常是这样的 Controller :{{my-component
eventSource=controller}}

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

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

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

另一个注意事项:仅作记录，访问组件的另一种方法是使用 Ember.View.views['name']，其中 name 是 View 名称你给了你的组件。但是我觉得进行这样的调用很脏，甚至更多来自 Controller 。

Answer 1

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

例如，与其尝试在组件上调用类似deactivate 的方法，不如将active 等属性绑定(bind)到模板中的属性:

{{my-component active=formEnabled}}

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