Request for a localization / internationalization tutorial

1

Hello,

Would someone kindly post a tutorial on localization of an Ember app, to include aspects like string localization, different templates or layouts based on the locale.

2 Likes
2

I would also love to see some discussion around this topic.

I am wondering what the official best practices are around localizing an ember application.

Are people mostly localizing content at the API/Backend in layer? Is there specific things to consider when localizing an ember application.

Some googling suggests that a lot of the effort is done in some specific handlebars helpers.

Found this: https://gist.github.com/pulletsforever/3093861

I am having to research this topic as well. Will post back if I find anything useful.

3

@salzhrani you may want to check out this

http://emberjs.com/api/classes/Ember.String.html#method_loc

Here is a JSBin using the helper

http://emberjs.jsbin.com/IKusUve/1/edit

To see some more

https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/helpers/loc.js

4

I am using Ember-i18n and it works great. @jamesarosen could explain it better obviously as it is his work.

2 Likes
5

We use Ember-I18n extensively at Zendesk. It operates similarly to Ember’s String.prototype.loc. First, you define a Ember.I18n.translations hash with keys and values. For example:

Ember.I18n.translations = {
  'welcome.h1': 'Hello, {{name}}',
  'log_out.title': 'Log out as {{name}}',
  'comments.header.one': 'One Comment',
  'comments.header.other': '{{count}} Comments'
};

It’s a bit more advanced than String.prototype.loc, though. Most notably, it adds the {{t}} and {{translateAttr}} helpers and supports count-based inflection.

Use the {{t}} helper like so:

{{t "welcome.h1" nameBinding="App.currentUser.name" tagName="h1"}}
// emits <h1>Hello, eccegordo</h1>

Use the {{translateAttr}} helper like so:

<a href="#/session/end" {{translateAttr  title="log_out.title" nameBinding="App.currentUser.name"}}>
// emits <a href="#/session/end" title="Log out as eccegordo"

Use count-based inflection like so:

<h2>{{t "comments.header" countBinding="post.comments.length"}}</h2>
// emits <h2>One Comment</h2>
6

Does that mean you need to preload the correct (I mean the right language) Ember.I18n.translations before the app initialize? If so, what could be the best practice to do that (With Rails or without rails fro instance)?

7

The only requirement is that they’re loaded before they’re used. We pre-load a core set of translations in an app initializer. We load other packages later when you first use the relevant functionality. We expose our translations from Rails in a JSON API.

8

Here’s a short demo using Ember-i18n for localization

You must set Em.I18n.translations before Ember renders any views

App.ApplicationRoute = Em.Route.extend({
  beforeModel: function(){
    var lang = localStorage.lang;
    var route = this;
    if(lang){
      return new Ember.RSVP.Promise(function(resolve) {
        // Fetch language file
        Em.$.getJSON('js/locale_'+lang+".json").then(function(data){
          Em.I18n.translations = data;
          route.transitionTo('main');
          resolve();
        });
      });
    }else{
      this.transitionTo('lang');
    }
  }
});

Controller for saving setting in localStorage:

App.LangController = Em.Controller.extend({
  actions: {
    selectLang: function(lang){
      localStorage.lang = lang;
      // Reload page to fetch lang file
      location.reload();
    }
  }
});

Lang template:

<button {{action "selectLang" "EN"}} type="button">English</button>
6 Likes