ember.js - Application localization using late evaluation with properties -

I have a bunch of controllers in which some properties are produced from the translation library:

 < Code> App.CallsStatusTotalsPerHourChartController = Ember.ArrayController.extend ({title: Ember.I18n.t ('dashboard.calls-per- hour.title'), subtitles: Ember.I18n.t ('dashboard.calls-per-hour .subtitle '), Nodata Text: Amber.I 18N (' Dashboard. Call-per-Hour. Navana-Data '), Content: []});  

The problem is that the language file is not yet loaded (takes some time), so at the time of definition, near Ember.I18n.t There is no data, and all translations are failing. It has many solutions, but what seems simple to me is the following:

Instead of calling directly Ember.I18n.t , I have a delayedT , which will be done on the basis of a property:

  function delayedT (key) {refund property based on App.languageLoaded, to Ember.I18n.t (key)}  

Whenever an application flag is set, this property will be calculated: App.languageLoadedWhen the language file is loaded, I App.set ('language Loaded ', true) and that Will also set fire to translations. In this way the translation will be done only once (when the language data has arrived) at the right time for the application.

Does this make everything understandable? First of all, I advise not to set the app

/ code> global.

Overall, you can solve it by calculating that language, which is invalid when the language is loaded.

To clarify this approach, here is some unwanted code. Create a translator class:

  App.Translator = Ember.Object.extend ({languageLoaded: false, translation of: function (key) {if (this.get ('languageLoaded')) { Return amber.i18n.t (key);}}});  

Register it as a singleton, and put it on controllers:

  Ember.Application.initializer ({name: 'setup translation', Initialize: function {application.register ('translator: main', app translator); container injection ('controller', 'translator', 'translator: main');}});  

Then in your controller, you can have one property which is dependent on the languageLoaded property (hence it is invalid when the language is loaded). Will be played again and again:

  App.CallsStatusTotalsPerHartController = Ember.ArrayController.extend ({title: function () {this.get ('translator') return 'dashboard.calls- per -hour.title '. (You can shorten it with a macro:  
  function t (key);) .property (' translator.languageLoaded ')}}; < / Code> 
 
 {return function () {this.get ('Translator') translation of return;} .property ('translator.languageLoaded').} App.CallsStatusTotalsPerHartController = Ember.ArrayController.extend ({Title: T ('Dashboard. Call-per-hour.title' ), Subtitled: T ('dashboard.calls per hour subtitle'), noDataText: T ('.dashboard.calls-per-hour.no-data'), content: []});  

When your language is loaded, do not forget to look at the translator and set the boolean:

  // yippee, my language will eventually load Ember.run (task) () {This.container.lookup ('translator: main'). Set ('languagelogged', true); });  

If you really want, there are ways to use the promises here, but I probably would not have bothered.