ember: dynamic language in templates. use LanguageController? - ember.js

Question

I have an ember app written in pre 1.0 ember. I want to re-write the app in ember 2.0.
In the old codebase I have an LanguageController that have english defintions of all langauge strings, and I have an ajax call to populate the language controller with strings from another language. I then have that controller available as a global variable available in all templates. An ember 2.0 template may look like this:
<label id="lblHomeNextAppointment">{{EEA.lang.home_next_appointment}}</label>
<div class="appointment">
{{model.nextAppointment.formattedDate}}
{{model.nextAppointment.title}}
</div>
I want to put the dynamic language string where it says EEA.lang.home_next_appointment.
How to structure controllers etc. to achieve this? Maybe use a service? Whats the fundamental difference between a controller and a service?
The old (pre 1.0) controller looks like this:
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
},
...

Answer 1

You should use library for internationalization. Ember-I18n does exactly what are you looking for.
In your template you can use {{t}} helper:
<label id="lblHomeNextAppointment">{{t 'lang.home_next_appointment'}}</label>
You just need file with translations:
export default {
lang: {
'home_next_appointment': 'whatever'
}
};
I have an ajax call to populate the language controller with strings
from another language.
With Ember-I18n you can define translations at runtime.
For example, you could setup dynamic loading of required translations in beforeModel() hook of application route:
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);
});
},
Of course, with approach above you need to have .json translation files under public translations URL path.

Answer 2

There are few approaches for solving this, however in my opinion it's best to use Ember.Service() for this, for instance by creating Translator service (See Service Guide). I would reason this using following arguments:
You could detach Translator service from app and use it in other one
You could connect such service on-demand when needed (components, controllers, other services etc.)
You could eagerly load such service globally by using object initializer if needed
While you still could do it, coupling Route with controller would not requirement anymore
In this scenario you could do something like this:
Translator service:
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'}
}
});
Injecting in controller
export default Ember.Controller.extend({
translator: Ember.inject.service()
});
And usage in template:
<p>{{translator.current.a}}</p>
See full gist or live example.
Obviously, one could do better, for instance by splitting into Translator (for setup/configuration) and Dictionary (for exposing selected language translations), so that template use would be something like {{Dictionary.index.greeting}}, but it shows Service-based approach to the problem.