# Request for a localization / internationalization tutorial

**URL:** <https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336>\
**Category:** Uncategorized\
**Created:** [May 25, 2013, 8:49am UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336 "2013-05-25T08:49:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![salzhrani](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@salzhrani](https://discuss.emberjs.com/u/salzhrani)\
**Post date:** [May 25, 2013, 8:49am UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336/1 "2013-05-25T08:49:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [November 1, 2013, 6:42pm UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336/2 "2013-11-01T18:42:42Z")

</div>

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](https://gist.github.com/pulletsforever/3093861)

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

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [November 1, 2013, 6:46pm UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336/3 "2013-11-01T18:46:57Z")

</div>

@salzhrani you may want to check out this

[http://emberjs.com/api/classes/Ember.String.html#method\_loc](http://emberjs.com/api/classes/Ember.String.html#method_loc)

Here is a JSBin using the helper

[http://emberjs.jsbin.com/IKusUve/1/edit](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](https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/helpers/loc.js)

---

<div class="post-metadata">

**Author:** ![Brendan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/brendan/32/14555_2.png) [@Brendan](https://discuss.emberjs.com/u/Brendan)\
**Post date:** [November 3, 2013, 3:59am UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336/4 "2013-11-03T03:59:53Z")

</div>

I am using [Ember-i18n](https://github.com/jamesarosen/ember-i18n) and it works great. @jamesarosen could explain it better obviously as it is his work.

---

<div class="post-metadata">

**Author:** ![jamesarosen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jamesarosen/32/3535_2.png) [@jamesarosen](https://discuss.emberjs.com/u/jamesarosen)\
**Post date:** [November 4, 2013, 10:41pm UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336/5 "2013-11-04T22:41:12Z")

</div>

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>

```

---

<div class="post-metadata">

**Author:** ![borisrorsvort](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/borisrorsvort/32/14941_2.png) [@borisrorsvort](https://discuss.emberjs.com/u/borisrorsvort)\
**Post date:** [November 4, 2013, 10:56pm UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336/6 "2013-11-04T22:56:16Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![jamesarosen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jamesarosen/32/3535_2.png) [@jamesarosen](https://discuss.emberjs.com/u/jamesarosen)\
**Post date:** [November 4, 2013, 11:41pm UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336/7 "2013-11-04T23:41:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![indream](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/indream/32/14602_2.png) [@indream](https://discuss.emberjs.com/u/indream)\
**Post date:** [November 5, 2013, 6:06pm UTC](https://discuss.emberjs.com/t/request-for-a-localization-internationalization-tutorial/1336/8 "2013-11-05T18:06:24Z")

</div>

Here’s a short demo using [Ember-i18n](https://github.com/jamesarosen/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>

```