2

I'm writing some Octane-style components in Ember v3.13, together with the {{did-insert}} ember-render-modifier. However, when the function tied to did-insert is called, I get TypeError: this is undefined. What am I doing wrong?

Here's my component template:

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

And here's the component's JavaScript class:

import Component from '@glimmer/component';


export default class CodeEditor extends Component {
  renderEditor(el) {
    console.log(this.args.code)
  }
}
handlebears
  • 2,168
  • 8
  • 18

1 Answers1

9

Methods that are used as actions in templates need to be decorated with @action to have correct 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)
  }
}

The action decorator binds the component context to the method. This is described in more detail in the API docs for action.

handlebears
  • 2,168
  • 8
  • 18
  • "Any time" is way to broad. Only method that are used as actions in templates need to be decorated with `@action` to have correct `this`-context. It's discussed more in detail in [API docs](https://api.emberjs.com/ember/3.14/functions/@ember%2Fobject/action). – jelhan Nov 07 '19 at 21:13
  • Thanks @jelhan, I have updated it to include your suggestion! – handlebears Nov 08 '19 at 21:01