我在哪里可以将Ember-I18n的翻译放在Ember-CLI中？

Question

我是ember,ember-cli的新手,我还在学习一切顺利的地方.我正在尝试使用ember-i18n模块添加多语言支持.

我有与bower一起安装的依赖项

bower install cldr ember-i18n --save

而且我的进口工作正在进行中 Brocfile.js

app.import('vendor/cldr/plurals.js');
app.import('vendor/ember-i18n/lib/i18n.js');

在我的应用程序中,i18n车把助手正在工作

{{t hello}} 给我"缺少翻译:你好"

我不知道在包含翻译的ember-cli文件夹结构中放置或引用文件的位置.

根据ember-i18n文档,它看起来像这样

Ember.I18n.translations = {
    hello: "Hello World",
}

我试着坚持app.js只是为了看它工作,但得到了错误:

Uncaught TypeError: Cannot set property 'translations' of undefined

Answer 1

您可以在initializer(此处的文档)中添加您的翻译.使用ember-cli,您可以通过ember generate initializer i18n命令行生成一个.

在初始化程序中,您可以设置翻译:

var TRANSLATIONS = {
  'user.edit.title': 'Edit User',
  'user.followers.title.one': 'One Follower',
  'user.followers.title.other': 'All {{count}} Followers',
  'button.add_user.title': 'Add a user',
  'button.add_user.text': 'Add',
  'button.add_user.disabled': 'Saving...'
};
var i18nInitializer = {
  name: 'i18n',
  initialize: function() {
    Ember.I18n.translations = TRANSLATIONS;
  }
};
export default i18nInitializer;

如果要通过java-properties文件中的ajax检索语言数据,可以使用ajax检索它并使用java-properties.js进行解析.它也可以通过Bower获得

Answer 2

我遇到了与Weston相同的问题,经过一些研究,我已经实现了一个可以动态加载用户指定的语言的解决方案.对于OP而言,这可能为时已晚,但我将其放在此处以供将来参考可能对此过程有疑问的任何人参考.

我的解决方案可能不是处理这种方法的理想方式,但它似乎与我的网站很好地协作.

我正在使用Ember-cli,包括用于国际化的ember-i18n,以及用于处理复数的CLDR.我的网站使用cookie来存储用户语言,用于在网站加载时加载相应的语言文件.cookie也传递给REST服务(一些API调用返回可能包含翻译文本的对象).我正在使用jQuery-cookie进行cookie处理.

首先,我创建了我的翻译文件,每种语言一个,这些文件只是我将使用$ .getScript加载的javascript文件.我将它们存储在Ember-cli创建的public/javascript文件夹中的"translations"文件夹中.

翻译-en.js

Ember.I18n.translations = {
  'hello' : 'Hello World!',
  ...
}

翻译-fr.js

Ember.I18n.translations = {
  'hello' : 'Bonjour Monde!',
  ...
}

然后我为CLDR设置初始化程序,它根据我的网站使用的用户lang cookie设置默认语言 - 如果cookie尚不存在,则默认为'en'并创建cookie.

\程序\初始化\ cldr.js

export default {
  name: 'cldr',

  initialize: function() {
    var lang = $.cookie('user-lang');

    if (lang === undefined) {  // no cookie exists yet
      lang = 'en';
      $.cookie('user-lang', lang, {expires:365, path:'/'});
    }

    CLDR.defaultLanguage = lang; 
  }
};

现在在Application Route的beforeModel函数中,我根据存储在CLDR.defaultLanguage中的值获取翻译文件.

\程序\路径\的application.js

export default Ember.Route.extend({

  beforeModel: function() {
    $.getScript('./javascript/translations/translations-' + CLDR.defaultLanguage + '.js')
      .fail(function(jqxhr, reason, exception) {
        // handle failure
      });
  }
});

如果您的网站包含大量翻译字符串或多种语言,您可能不希望每次有人加载您的应用时都包含您的翻译文件,或者可能需要一段时间才能加载.在这种情况下,您可以使用ajax调用替换此getScript,并获取后端提供的文件.在我的情况下,没有太多的翻译字符串,所以这是好的.

现在,只要用户想要更改语言,我所要做的就是更新user-lang cookie的值,然后重新加载站点,该站点将再次通过初始化程序和beforeModel函数并加载相应的语言文件.

export default Ember.Controller.extend({
  actions: {
    changeLanguage: function(lang) {
      $.cookie('user-lang', lang); 

      window.location.reload();
    }
  }
});

每当用户重新加载页面或返回到站点时,默认情况下将从cookie加载其最后选择的语言.当然,用户可以删除他们的cookie或从其他浏览器登录,在这种情况下,该网站将返回默认的"en"语言.为了解决这个问题,用户的语言选择需要在后端的某个地方保留并在应用程序加载时获取 - 但这是另一项任务.