Ember.js 将操作从嵌套组件传播到AppController

我有一个组件嵌套在其他组件的几个层次。我试图将一个动作一直传播到

AppController

，以打开一个模式

我知道这样做的唯一方法是将动作传递给每个组件，但这似乎非常不切实际。是否有更好的方法从嵌套组件访问

AppController

但是我正在尝试访问您可以使用的

AppController

上的操作，它可以像pub/sub一样使用。
这是

解决方案大纲：
1.在

ApplicationController

init上，控制器订阅

“OpenModel”

事件。
2.Nested组件在操作中插入事件

“OpenModel”

。
3.可以使用有效负载执行检测，因此这将是确定模态内容的地方

App.ApplicationController=Ember.Controller.extend({
行动：{
OpenModel：功能（选项）{
警报（'这将打开包含以下内容的模式：'+options.modalContent）；
}
},
subscribeEvents:function（）{
this.set（'openModalSubscriber'，Ember.Instrumentation.subscribe（'openModal'{
之前：Ember.K，
after:Ember.run.bind（这是一个函数（名称、时间戳、负载、beforeRet）{
this.send（'openModal'，有效载荷）；
}),
}这),；
}.on（'init'）
});

App.SubComponentComponent=Ember.Component.extend({
行动：{
triggerModal:function（）{
Ember.Instrumentation.instrument（‘OpenModel.子组件’{
情态内容：“情态的内在内容”
}，Ember.K，本页）；
}
}
});

组件被认为是非常孤立的，因此跳过其他组件，直接进入它们的控制器可能没有意义。。。见下面的讨论

---

有一个

targetObject

属性，它可能对您有用，尽管我不能100%确定您在这种情况下会将其设置为什么。

这很酷，但仪器模块不是主要用于性能测试吗？是的。但我看不出有什么理由不把它当作酒吧/酒吧。

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.AppController = Ember.Controller.extend({
    actions: {
        openModal: function(){
            alert('this would open the modal')
        }
    }
})

App.MainComponentComponent = Ember.Component.extend({})

App.SubComponentComponent = Ember.Component.extend({
    actions: {
        triggerModal: function(){
            // need to trigger the openModal action on the AppController
            this.sendAction('openModal')

        }
    }
})

<script type="text/x-handlebars" data-template-name="index">
  <h1>Index</h1>

{{main-component model=model}}
</script>

<script type="text/x-handlebars" data-template-name="components/main-component">
  <h2>Main component</h2>

{{#each color in model}}
    {{sub-component color=color}}
{{/each}}
</script>   

<script type="text/x-handlebars" data-template-name="components/sub-component">
  <button {{action "triggerModal"}}>{{color}}</button>
</script>

this.render(modalName, {
  into: 'application',
  outlet: 'modal'
});