Emberjs and I18n

這兩天試了emberjs的i18n方法，有了一點小心得在這裡紀錄一下。 一開始google下去找到的就是jamesarosen這個ember i18n library。 library裡面有介紹CLDR.js這個library，主要是處理不同語言間名詞數量的問題。 當然你可以單獨使用i18n library，也可以搭配CLDR.js。 請參考CLDR plural 規範

使用ember i18n library很容易，首先就是載入i18n.js，要注意的是如果你要使用CLDR的話要比i18n.js更早載入

<script src="js/vendor/plurals.js"></script>
<script src="js/vendor/i18n.js"></script>

接著就是定義你的字典，假設我先定義三個語言分別是中文，英文和法文

dictionary.en.js
1
2
3
4
5

Em.I18n.translations = {
  'user.edit.title': 'Edit User',
  'user.followers.title.one': 'One Follower',
  'user.followers.title.other': 'All { {count}} Followers'
};
dictionary.zh.js
1
2
3
4
5

Em.I18n.translations = {
  'user.edit.title': '編輯使用者',
  'user.followers.title.one': '一個跟隨著',
  'user.followers.title.other': '全部{ {count}}個跟隨者'
};
dictionary.fr.js
1
2
3
4
5

Em.I18n.translations = {
  'user.edit.title': 'Modifier l\'utilisateur',
  'user.followers.title.one': 'un suiveur',
  'user.followers.title.other': '{ {count}} disciples'
};

在你程式開始地方宣告你目前使用的language，我是放在ember App建立之後，在我的html載入js時也是預設先載入英文字典檔。

main.js
1
2
3
4
5
6

var App = Ember.Application.create({
  ready: function() {
      console.log('my App is ready');
      CLDR.defaultLanguage = 'en';
  }
});

...
<script src="js/dictionary.en.js"></script>
<script src="js/main.js"></script>
...

接著你就只要隨便在你的畫面上放按鈕切換語系，切換的方法也就是用ajax去載入其它的字典檔。 我寫在controller裡面用一個method去讀我想要的字典檔回來，但我在寫的時候發現由於ajax async的方式所以字典檔載入後畫面不會有變動， 變成必須先切到別的頁面才會生效，為了讓它立即生效我讓它transition到一個叫i18redirect的route然後在那個route裡面再回到原本的頁面。 這樣的好處就是在畫面上按下切換語系會馬上生效。

internationalization.controller.js
1
2
3
4
5
6
7
8
9
10

App.InternationalizationController = Ember.ObjectController.extend({
  updateLanguage: function(lang) {
      var _self = this;
      //ajax load js and redirect to make template rerender
      $.getScript("js/utils/dictionary."+lang+".js", function() {
          CLDR.defaultLanguage = lang;
          _self.transitionToRoute('i18redirect');
      });
  },
});
i18redirect.router.js
1
2
3
4
5

App.I18redirectRoute = Ember.Route.extend({
  redirect: function() {
      this.transitionTo('internationalization');
  }
});

稍微解釋一下字典檔裡面xxx.one跟xxx.other的意思，你剛才看字典檔(dictionary.xx.js)會發現如下的寫法。

'user.followers.title.one': 'One Follower',
'user.followers.title.other': 'All { {count}} Followers'

你必須去參考我一開始給的那網頁裡面定義各國語言中什麼時候該用one或other

以英文為例當數量為1的時候會使用xxx.one這個字，其它情況下就是用xxx.other。

one → n is 1;
other → everything else

所以如果我在我的template裡面放進底下這些字

<h2>{ {t user.edit.title}}</h2>\
<h2>{ {t user.followers.title count="0"}}</h2>\
<h2>{ {t user.followers.title count="1"}}</h2>\
<h2>{ {t user.followers.title count="2"}}</h2>\

在切換到各個語系看起來就是

English

Edit User
All 0 Followers
One Follower
All 2 Followers

Chinese

編輯使用者
全部0個跟隨者
全部1個跟隨者
全部2個跟隨者

French

Modifier l'utilisateur
un suiveur
un suiveur
2 disciples
emberjs
Comments

Comments