ember.js - 将 Controller 对象绑定(bind)到 ember 中的组件

Question

我正在尝试在 ember 中构建一个模态框组件。模态框有两个标准按钮，“关闭”和“保存”。我想将 Controller 操作传递给该组件，以便在单击保存按钮时，它会调用传递的 Controller 操作。我称我的组件为:

 {{#affi-modal-box title="Test title" modalId="createNewAnalyticsRunModal" controllerBinding=controller}}some message{{/affi-modal-box}}

和我的组件:

AS.AffiModalBoxComponent = Ember.Component.extend({
attributeBindings: ['modelId','test'],
    //this is the function that gets called when save button is clicked 
    onSaveButtonClick : function(){

        console.log(this.controllerFor('analysisTemplates'));//fails
        console.log(this.get('controller'));//returns modal box component which I don't need 
    }

});

有什么想法可以将 Controller 对象传递给组件吗？

谢谢。

Answer 1

Ember.Component 的工作方式是与应用程序的其他部分无关，因此与其传入一个 Controller ，当您的组件发生某些事情时，您希望在该 Controller 上调用一个 Action ，您可以通过以下方式进行操作:

{{#affi-modal-box 
  title="Test title" 
  modalId="createNewAnalyticsRunModal" 
  action="actionNameOnTheController"}}some message{{/affi-modal-box}}

如您所见，您设置了 action属性到你的 Controller 上的 Action 名称，然后在你的组件中你只需调用 this.sendAction('action');这将触发您之前定义的任何操作名称:

AS.AffiModalBoxComponent = Ember.Component.extend({
  attributeBindings: ['modelId','test'],
  //this is the function that gets called when save button is clicked 
  onSaveButtonClick : function(){
    this.sendAction('action');
  }
});

所以现在，每当 onSaveButtonClick被调用它将发送操作 actionNameOnTheController到任何正在收听它的 Controller 。最重要的是，对 Controller 一无所知。这种功能使 Ember.Component 可以以任何方式重用。

请看这里 simple demo的概念解释。

希望能帮助到你。