Объект связывания контроллера с компонентом в ember

Question

Я пытаюсь создать компонент модального блока в ember. Модальная коробка имеет две стандартные кнопки: «закрыть» и «сохранить». Я хотел передать действие контроллера этому компоненту, чтобы при нажатии кнопки сохранения он вызывал действие контроллера, которое было передано. Звоню компонент, как:

{{#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 
    } 

});

Любые идеи, как я могу передать объект контроллера компоненту?

Спасибо.

Answer 1

Способ работы Ember.Component должен быть агностическим для других частей вашего приложения, поэтому вместо этого передается контроллер, на котором вы хотите, чтобы действие вызывалось, когда что-то происходит в вашем компоненте, вы делаете это больше таким образом:

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

Как вы можете увидеть, вы установите атрибут имени действия 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 тому, кто его прослушивает. И лучше всего, ничего не зная о контроллере. Это тот тип функциональности, который делает Ember.Component многократно используемым.

Пожалуйста, ознакомьтесь с приведенной здесь концепцией simple demo.

Надеюсь, это поможет.