渲染组件时未调用 Init() 方法？

Question

Im trying to migrate from ember classic syntax to more modern syntax, but struggling to understand why my init() method call does not get called?

template:

<HomeCard>
  {{#if this.loadThemeEditorDeepLink.lastSuccessful}}
    <PolarisBanner
      @status="critical"
      @action={{hash
        text="Turn on"
        onAction=(route-action "openUrl" this.themeEditorAppEmbedUrl)
      }}
      @secondaryAction={{hash
        text="Watch quick tutorial"
        onAction=(fn (mut this.showModal) true)
      }}
    />
  {{/if}}
</HomeCard>

{{#if this.showModal}}
  <PolarisModal
    @onClose={{fn (mut this.showModal) false}}
  />
{{/if}}

counter .js component file:

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { dropTask } from 'ember-concurrency-decorators';
import { tracked } from '@glimmer/tracking';
export default class CheckComponent extends Component {
  @service ajax;

  @tracked themeEditorAppEmbedUrl = '';
  showModal = false;

  @dropTask
  loadThemeEditorDeepLink = function* loadThemeEditorDeepLink() {
    let url = yield this.fetchThemeSettingsAppEmbedDeepLink();
    this.themeEditorAppEmbedUrl = url;
  };

  async fetchThemeSettingsAppEmbedDeepLink() {
    try {
      let result = await this.ajax.request(
        `apiUrl`
      );
      return result.theme_editor_deep_link_url;
    } catch (err) {
      this.errorHandler.handle(err);
    }
  }

  init() {
    console.log('testing');
    super.init(...arguments);
    this.loadThemeEditorDeepLink.perform();
  }
}

Even tough my component gets rendered just fine, the init() call does not happen, thus my component malfunctions

Any idea on what I might be missing?

Answer 1

glimmer components do not have an init method. They are mostly "basic classes", so you'd want to use the constructor instead.

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { dropTask } from 'ember-concurrency-decorators';
import { tracked } from '@glimmer/tracking';

export default class CheckComponent extends Component {
  @service ajax;

  @tracked themeEditorAppEmbedUrl = '';
  showModal = false;

  constructor(owner, args) {
    super(owner, args);
    
    this.loadThemeEditorDeepLink.perform();
  }

  // ...
}

for more information:

• https://api.emberjs.com/ember/release/modules/@glimmer%2Fcomponent#constructor

this may be helpful as well: https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/