javascript - EmberJS调用父组件方法的方法

Question

我遇到了一个有趣的问题，它不符合 Ember 的数据向下，操作向上的原则。

我有一个代码编辑器组件 (code-editor) 位于父组件 (request-editor) 中。编辑器组件上有一个方法可以在当前光标位置插入一个字符串。父组件包含一些按钮，用于将内容插入编辑器(例如当前日期)。

我认为我将按钮与编辑器分开是正确的，因为编辑器在没有这些按钮的其他地方使用。

对于这个用例使用绑定(bind)变量显然没有意义，因为它不是真正的数据，它想要执行一个 Action 。 IE。 {{code-editor insertText=insertText}} 没有意义。

如何从父组件有效地调用 codeEditorChildComponent.insert()？我很欣赏这可能涉及将它们耦合在一起，但无论如何它们都必须耦合才能工作。父组件已经由子组件组成。

Answer 1

所有通信都应使用操作来完成。我认为下面是一个好方法。您在 request-editor 组件中有 code_editor 属性，然后可以将操作发送到 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);
}