如何在承诺履行后向助手注入服务？

Question

我正在开发一个简单的 Ember 应用程序，它从 API 中检索所有语言字符串。我已经使用 translate() 方法设置了一个服务，并将该服务注入到一个助手中。问题是属性 I want to use it 在 helper 中不可用，因为当它被使用时，承诺还没有实现。从服务加载后如何访问助手中的属性？

服务（app/services/i18n.js）：

export default Ember.Service.extend({
    locales: null,
    init() {
        this._super();

        Ember.$.getJSON('/api/recruiting/locales').then(function (response) {
            this.set('locales', response.data);
        }.bind(this));
    },
    translate(key) {
        // This causes the problem: locales property has not been loaded yet at this point
        return this.get('locales.' + key);
    }
});

助手 (app/helpers/translate.js):

export default Ember.Helper.extend({
    i18n: Ember.inject.service(),
    compute(params/*, hash*/) {
        var i18n = this.get('i18n');

        return i18n.translate(params[0]);
    }
});

Answer 1

我刚找到一个 'solution'。每次 'locales' 属性更改时，我都会重新计算助手。这是我的助手现在的样子：

export default Ember.Helper.extend({
    i18n: Ember.inject.service(),
    onLocalesInit: Ember.observer('i18n.locales', function () {
        this.recompute();
    }),
    compute(params/*, hash*/) {
        var i18n = this.get('i18n');

        return i18n.translate(params[0]);
    }
});

Answer 2

使用 Ember Octane 结果会是这样的。注意观察者被认为是不好的做法，所以你需要在 i18n 服务中实现某种变化监听器来触发 i18n.locales 变量的变化。

import Helper from '@ember/component/helper';
import { inject as service } from "@ember/service";

export default class Translate extends Helper {
  @service i18n;

  init() {
    super.init(...arguments);
    this.i18n.addChangeListener(this.localeChanged);
  }

  willDestroy() {
    super.willDestroy();
    this.i18n.removeChangeListener(this.localeChanged);
  }

  localeChanged = () => {
    this.recompute();
  }

  compute([key]) {
    return this.i18n.translate(key);
  }
}

如何在承诺履行后向助手注入服务？

How to inject service to helper after a promise has been fulfilled?

ajax

ember.js

promise

ember-cli

es6-promise