How to call a method of a child component from a parent in EmberJS

Question

I got into an interesting problem that is not suitable for data Embers down, the principle of action.

I have a code editor component ( code-editor) that is inside the parent component ( request-editor). There, the method for the editor component inserts the line at the current cursor position. The parent component includes some buttons for inserting elements into the editor (for example, the current date).

I think I'm right in separating buttons from the editor, because the editor is used elsewhere without these buttons.

Obviously, it makes no sense to use a bound variable for this use case, because it is not really data, they want to perform an action. That is, {{code-editor insertText=insertText}}it makes no sense.

How can one be called effectively codeEditorChildComponent.insert()from the parent component? I appreciate that this is likely to be related to their merging, but they must be related in order for it to work anyway. The parent component consists of child components.

Answer 1

All messages must be executed using actions. I think this is a good way. And you have a property code_editorin the component request-editor, then you can send the action to the component code-editor.

request-editor.hbs

{{code-editor owner=this}}

request-editor.js

actions:{
  setChild(child){
    this.set('code_editor', child);
  }
}

code-editor.js

didInsertElement(){
  this._super(...arguments);
  this.get('owner').send('setChild', this);
}