ember：模板中的动态语言。使用语言控制器？答案

【问题标题】：ember: dynamic language in templates. use LanguageController?ember：模板中的动态语言。使用语言控制器？
【发布时间】：2015-09-02 10:20:39
【问题描述】：

我有一个用 ember 1.0 之前编写的 ember 应用程序。我想在 ember 2.0 中重新编写应用程序。

在旧代码库中，我有一个 LanguageController，它对所有语言字符串都有英文定义，并且我有一个 ajax 调用来用另一种语言的字符串填充语言控制器。然后，我将该控制器用作所有模板中可用的全局变量。 ember 2.0 模板可能如下所示：

<label id="lblHomeNextAppointment">{{EEA.lang.home_next_appointment}}</label>
    <div class="appointment">
        {{model.nextAppointment.formattedDate}}
        {{model.nextAppointment.title}}
    </div>

我想把动态语言字符串放在上面写着EEA.lang.home_next_appointment的地方。

如何构造控制器等来实现这一点？也许使用服务？控制器和服务之间的根本区别是什么？

旧的（1.0 之前的）控制器如下所示：

EEA.LanguageController = Ember.ArrayController.extend({
    // Default values for language strings
    "header_progress": 'Progress',
    "header_planned": 'Planned',
    "home_next_appointment": "Next Appointment",
...
    init: function() {
        this._super();
        EEA.lang = this;  // Shorter to write EEA.lang, than EEA.router.languageController
    },
...

【问题讨论】：

如果您想继续使用现代版本的 ember，请考虑使用 ember-cli 和插件。有一个很好的翻译github.com/jamesarosen/ember-i18n

标签： ember.js

【解决方案1】：

您应该使用库进行国际化。 Ember-I18n 完全符合您的要求。

在您的模板中，您可以使用{{t}} helper：

<label id="lblHomeNextAppointment">{{t 'lang.home_next_appointment'}}</label>

你只需要file with translations:

export default {
  lang: {
    'home_next_appointment': 'whatever'
  }
};

我有一个 ajax 调用来用字符串填充语言控制器来自另一种语言。

使用 Ember-I18n，您可以define translations at runtime。

例如，您可以在 application 路由的 beforeModel() 钩子中设置所需翻译的动态加载：

i18n: Ember.inject.service(),

beforeModel() {
    let lang = $.cookie('user-lang');
    if (!lang) {
      lang = 'pl';
    }

    this.set('lang', lang);

    Ember.$.getJSON('/translations/' + lang + '.json', (json) => {
      this.get('i18n').addTranslations(lang, json);
    });
},

当然，通过上述方法，您需要在公共translations URL 路径下有.json 翻译文件。

【讨论】：

【解决方案2】：

解决这个问题的方法很少，但我认为最好使用Ember.Service()，例如通过创建Translator 服务（参见Service Guide）。我会使用以下论点来推理：

您可以从应用中分离Translator 服务并在其他应用中使用它
您可以在需要时按需连接此类服务（组件、控制器、其他服务等）
如果需要，您可以使用object initializer 在全球范围内急切地加载此类服务
虽然您仍然可以这样做，但不再需要将 Route 与控制器耦合

在这种情况下，您可以这样做：

翻译服务：

export default Ember.Service.extend({
  lang: 't1', // For reference
  current: {},
  init: function() {
    this.current = this.translations[this.lang];
  },
  changeLanguage: function(lang) {
    this.set('lang', lang);
    this.set('current', this.translations[lang]);
  },
  translations: {
    t1: {a: 'T1:A', b: 'T1:B'},
    t2: {a: 'T2:A', b: 'T2:B'}
  }
});

在控制器中注入

export default Ember.Controller.extend({
  translator: Ember.inject.service()
});

以及模板中的用法：

<p>{{translator.current.a}}</p>

请参阅full gist 或live example。

显然，可以做得更好，例如拆分为Translator（用于设置/配置）和Dictionary（用于公开选定的语言翻译），因此模板的使用类似于{{Dictionary.index.greeting}}，但它展示了基于服务的方法来解决问题。

【讨论】：