ember.js - 为什么我的 Octane 组件方法中出现“这是未定义的”？

Question

我在 Ember v3.13 中编写了一些 Octane 风格的组件，以及{{did-insert}} ember-render-modifier。但是，当调用绑定到的函数时did-insert，我得到TypeError: this is undefined. 我究竟做错了什么？

这是我的组件模板：

<div class="cardhost-monaco-container" {{did-insert this.renderEditor}}></div>

这是组件的 JavaScript 类：

import Component from '@glimmer/component';


export default class CodeEditor extends Component {
  renderEditor(el) {
    console.log(this.args.code)
  }
}

Answer 1

在模板中用作操作的方法需要用@action正确的this-context 进行修饰：

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class CodeEditor extends Component {
  @action
  renderEditor(el) {
    console.log(this.args.code)
  }
}

动作装饰器将组件上下文绑定到方法。这在API 文档action中有更详细的描述。