Estoy tratando de migrar de la sintaxis clásica de Ember a una sintaxis más moderna, pero me cuesta entender por qué no se llama a mi método init() .

modelo:

 <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}}

contador de archivo de componente .js :

 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(); } }

Incluso si mi componente se procesa correctamente, la llamada init() no ocurre, por lo que mi componente no funciona correctamente.

¿Alguna idea de lo que me podría estar perdiendo?