Nuevo en Ember, me pregunto cuál es la mejor manera de hacer esto:
component.js import Component from '@ember/component'; import { inject as service } from '@ember/service'; export default Component.extend({ ajax: service(), url: '', async fetchUrl() { try { let result = await this.ajax.request( `api/urlgenerator` ); this.url = result.link; } catch (err) { this.errorHandler.handle(err); } }, init() { this._super(...arguments); this.fetchUrl(); }, });y mi plantilla
{{#card/banner}} <Banner @text="Template Button" @action={{hash text="Enable Launcher" onAction=(track-action (route-action "openUrl" this.url) ) }} /> {{/card/banner}} openUrl es un método global simple responsable de abrir una URL externa
--
No estoy muy seguro de si esta es la forma correcta de hacerlo, en este momento no está funcionando, ya que tal vez debido al ciclo de vida del componente Ember, la variable se representa solo con el valor inicial (vacío '')
Sin embargo, si codifico la URL, por ejemplo, funciona bien.
¿Alguien me puede dar algún consejo al respecto?
En el estilo de componente clásico, usaría this.set('url', result.link) en lugar de this.url = result.link . Sin embargo, en Ember moderno lo haría así:
export default class MyComponent extends Component { @service ajax; @tracked url = ''; constructor() { super(...arguments); this.fetchUrl(); } async fetchUrl() { try { let result = await this.ajax.request( `api/urlgenerator` ); this.url = result.link; } catch (err) { this.errorHandler.handle(err); } } } la URL de aviso debe ser @tracked .
En caso de que ayude a alguien, utilicé este enfoque La guía de promesas en propiedades calculadas