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

以下是我在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’],其中name是您赋予组件的视图名称.但是,我觉得打这样的电话很脏,甚至可以从控制器上打电话.

解决方法:

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

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

{{my-component active=formEnabled}}

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

标签：ember-js,javascript
来源： https://codeday.me/bug/20191122/2060247.html