Getting started with Internationalization (i18n) in Ember.js
Writing your Ember.js app to include Internationalization support is easy. Here’s a quick guide on how to implement it.
- Grab the CLDR.js library here. CLDR provides a bunch of handy pluralization logic that works across different locales. You want it.
- Next, grab the ember-i18n library here. This is the meat and potatoes of handling i18n in Ember applications, and it takes care of all of the gritty details.
- Now, before you create your Ember application, make sure to set the default locale for CLDR like so:
CLDR.defaultLocale = 'en';
- Lastly, create a file called
i18n.js
that you will load afterCLDR.js
andember-i18n
. This is where you will store your i18n strings. - Inside the
i18n.js
file, simply setup an object like so, with the appropriate keys for your application:Em.I18n.translations = { "user.edit.title": "Edit User", "user.followers.title.one": "One Follower", "user.followers.title.other": "All 9 Followers", "button.add_user.title": "Add a user", "button.add_user.text": "Add", "button.add_user.disabled": "Saving...", };
In your Handlebars templates, you can now reference the usual t
object to get the i18n strings:
<h2>{ { t user.edit.title } }</h2>
Now, that was pretty easy, eh?