如何在EmberJS中从父级调用子组件的方法

Question

I've hit an interesting issue that doesn't fit with Ember's data down, actions up principle.

I have a code editor component ( code-editor ) sat inside a parent component ( request-editor ). There's a method on the editor component to insert a string at the current cursor position. The parent component includes some buttons to insert things into the editor (eg the current date).

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

It obviously doesn't make sense to use a bound variable for this use-case because it's not really data, it's wanting to perform an action. Ie {{code-editor insertText=insertText}} makes no sense.

How is it possible to effectively call codeEditorChildComponent.insert() from the parent component? I appreciate it will probably involve coupling them together but they have to be coupled for it to work anyway. The parent component is composed of the child components already.

Answer 1

All communications should be done using actions. I think below is a good way. And you have code_editor property in request-editor component then could send action to code-editor component.

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);
}