ember-cliember-i18n

Where do I put the translations for Ember-I18n in Ember-CLI?


I am new to ember, and ember-cli and I'm still learning where everything goes. I'm trying to add multilingual support with the ember-i18n module.

I have the dependencies installed with bower

bower install cldr ember-i18n --save

And I've got my imports working in Brocfile.js

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

In my app the i18n handlebar helper is working

{{t hello}} gives me "Missing translation: hello"

I don't know where to put or reference a file in the ember-cli folder structure that contains the translations.

Per ember-i18n documentaton it would look something like this

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

I tried sticking it in app.js just to see it working but got the error:

Uncaught TypeError: Cannot set property 'translations' of undefined

Solution

  • You can add your translations within an initializer (docs here). With ember-cli you can generate one by doing ember generate initializer i18n on the command line.

    Within the initializer you can set the translations:

    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;
    

    If you want to retrieve the language data via ajax in a java-properties file you can retrieve it with ajax and parse it with java-properties.js. It is also available via Bower