Question

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

服务（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

我刚刚找到了'解决方案'。每次'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);
  }
}

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

2 个答案: