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

Posted 2023-02-19

【中文标题】我在 Ember-CLI 中将 Ember-I18n 的翻译放在哪里？

【英文标题】：Where do I put the translations for Ember-I18n in Ember-CLI?

【发布时间】：2014-08-12 05:49:37

【问题描述】：

我是 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

【问题讨论】：

lib 名称是 CLDR 而不是 CDLR，请修复 bower install 行

已修复，谢谢@chrmod。

我不知道为什么，但是导入 cldr before ember-i18n 基本上阻止了我的模板呈现。还原 2 行解决了这个问题。不知道为什么！

没关系：在 ember-i18n 工作之前必须包含 cldr。我的错误是没有设置 CLDR.defaultLanguage = "en"。现在一切正常！

【参考方案1】：

我遇到了与 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!',
  ...

translations-fr.js

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

然后我为 CLDR 设置初始化程序，它根据我的站点使用的用户语言 cookie 设置默认语言 - 如果 cookie 尚不存在，它默认为“en”并创建 cookie。

\app\initializers\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 中的值获取翻译文件。

\app\routes\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”语言。为了解决这个问题，用户的语言选择需要保留在后端某个地方并在应用加载时获取 - 但这是另一项任务。

【参考方案2】：

您可以在initializer (docs here) 中添加您的翻译。 使用 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;

如果您想通过 ajax 在 java-properties 文件中检索语言数据，您可以使用 ajax 检索它并使用 java-properties.js 解析它。它也可以通过 Bower 获得

【参考方案3】：

命名空间错误。

你需要Em.I18n.translations。

试过了。有效。

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

我也没有。当然app.js 有效，但也许有人可以提供一个很好的提示。我对所有 ember-cli 的东西也很陌生...

【讨论】：

是的！谢谢多伊。在与它斗争了一段时间后，我确实意识到了这一点。但我的主要问题仍然存在，ember-i18n 似乎希望翻译只包括当前语言的翻译。这意味着应该有一些智能过程来加载适当的翻译。我想把那个逻辑服务器端并只引用一个文件，但我不确定如何为不受 bower 管理的 ember-cli 建立依赖关系。

我也对这个话题很感兴趣。也许为此开始一个新问题是值得的。