EmberJS에서 부모로부터 자식 구성 요소의 메서드를 호출하는 방법

Question

Ember의 데이터와 일치하지 않는 흥미로운 문제가 발생했습니다.

상위 구성 요소 (request-editor) 안에 코드 편집기 구성 요소 (code-editor)가 있습니다. 현재 커서 위치에 문자열을 삽입하는 편집기 구성 요소에 대한 메소드가 있습니다. 상위 구성 요소에는 항목 (예 : 현재 날짜)을 편집기에 삽입하는 데 필요한 일부 버튼이 포함되어 있습니다.

편집기가이 단추가없는 다른 곳에서 사용되기 때문에 편집기에서 단추를 분리하는 것이 옳다고 생각합니다.

실제로는 데이터가 아니기 때문에 바운드 변수를 사용하는 것은 당연한 말이 아닙니다. 작업을 수행하려고합니다. 나는. {{code-editor insertText=insertText}}은 의미가 없습니다.

부모 구성 요소에서 codeEditorChildComponent.insert()을 효과적으로 호출하는 방법은 무엇입니까? 나는 아마 그것들을 함께 연결하는 것을 포함 할 것이지만 그것들은 어쨌든 작동하기 위해서 결합 되어야만한다는 점에 감사한다. 상위 구성 요소는 이미 하위 구성 요소로 구성됩니다.

Answer 1

모든 통신은 작업을 사용하여 수행해야합니다. 아래는 좋은 방법이라고 생각합니다. 그리고 당신 request-editor 구성 요소에 code_editor 속성을 가지고 다음 code-editor 구성 요소에 작업을 보낼 수 있습니다.

요청 editor.hbs

{{code-editor owner=this}} 

요청 editor.js

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

코드 editor.js

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