telefonicaid/ember-i18n

Name: ember-i18n

Owner: Telefónica I+D

Description: null

Created: 2015-05-12 10:08:13.0

Updated: 2015-05-12 10:08:14.0

Pushed: 2015-05-04 22:32:45.0

Homepage:

Size: 3041

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Ember-I18n

Internationalization for Ember

Requirements

Ember-I18n requires

• Ember v1.x
• Handlebars-runtime v1.x - v2.x
• jQuery v1.7 - v2.x

Set Ember.I18n.translations to an object containing your translation information. If the values of Ember.I18n.translations are Functions, they will be used as-is; if they are Strings, they will first be compiled via Ember.I18n.compile, which defaults to using Handlebars.compile. (That means that if you haven't precompiled your translations, you'll need to include the full Handlebars, not just handlebars-runtime.js in your application.)

Examples

Given

18n.translations = {
ser.edit.title': 'Edit User',
ser.followers.title.one': 'One Follower',
ser.followers.title.other': 'All {{count}} Followers',
utton.add_user.title': 'Add a user',
utton.add_user.text': 'Add',
utton.add_user.disabled': 'Saving...'

A simple translation:

{{t "user.edit.title"}}</h2>

yields

cript id="metamorph-28-start"></script>
it User
cript id="metamorph-28-end"></script>
>

A translation based on a bound key:

{{t title_i18n_key}}</h2>

yields

cript id="metamorph-28-start"></script>
d a user
cript id="metamorph-28-end"></script>
>

if controller.title_i18n_key is 'button.add_user.title'. If it subsequently changes to 'user.edit.title', the HTML will become

cript id="metamorph-28-start"></script>
it User
cript id="metamorph-28-end"></script>
>

Set interpolated values directly:

{{t "user.followers.title" count="2"}}</h2>

yields

cript id="metamorph-28-start"></script>
l 2 Followers
cript id="metamorph-28-end"></script>
>

Bind interpolated values:

{{t "user.followers.title" countBinding="user.followers.count"}}</h2>

yields

cript id="metamorph-28-start"></script>
l 2 Followers
cript id="metamorph-28-end"></script>
>

if user.getPath('followers.count') returns 2.

Translate properties on any object:

The Em.I18n.TranslateableProperties mixin automatically translates any property ending in "Translation":

Button = Em.Object.extend(Em.I18n.TranslateableProperties, {
belTranslation: 'button.add_user.title'


Button.get('label');

yields

"Add a user"

Translate attributes in a view:

Add the mixin Em.Button.reopen(Em.I18n.TranslateableAttributes) and use like this:

iew Em.Button titleTranslation="button.add_user.title">
t "button.add_user.text"}}
iew}}

yields

ton title="Add a user">
cript id="metamorph-28-start"></script>
d
cript id="metamorph-28-end"></script>
tton>

Nested Translation Syntax:

The above translation data can also be expressed as nested JSON objects:

18n.translations = {
ser': {
'edit': {
  'title': 'Edit User'
},
'followers': {
  'title': {
    'one': 'One Follower',
    'other': 'All {{count}} Followers'
  }
}

utton': {
'add_user': {
  'title': 'Add a user',
  'text': 'Add',
  'disabled': 'Saving...'
}

This format is often smaller and so makes downloading translation packs faster.

Pluralization

If you want to support inflection based on count, you will also need to include Ember-I18n's pluralization support (lib/i18n-plurals.js) after the Ember-I18n core (lib/i18n.js) itself and set Ember.I18n.locale to the current locale code (e.g. “de”).

18n.locale = 'en';

Now whenever you pass the count option to the t function, template will be pluralized:

18n.locale = 'en';

18n.translations = {
og': {
'one': 'a dog',
'other': '{{count}} dogs'



18n.t('dog', { count: 1 }); // a dog
18n.t('dog', { count: 2 }); // 2 dogs

The suffixes 'one' and 'other' are appended automatically.

Example using pluralization in the template:

'dog' count=dogs.length}} // Assuming dogs property is an array

Depending on the locale there could be up to 6 plural forms used, namely: 'zero', 'one', 'two', 'few', 'many', 'other'.

Missing translations

When t is called with a nonexistent key, it returns the result of calling Ember.I18n.missingMessage with the key and the context as arguments. The default behavior is to return “Missing translation: [key]“, but you can customize this by overriding missingMessage. The below example spits out the key along with the values of any arguments that were passed:

r.I18n.missingMessage = function(key, context) {
r values = Object.keys(context).map(function(key) { return context[key]; });
turn key + ': ' + (values.join(', '));


r.I18n.t('nothing.here', { arg1: 'foo', arg2: 'bar' });
> "nothing.here: foo, bar"

When a missing translation is encountered, a missing event is also triggered on Ember.I18n, with the key and the context as arguments. You can use this to execute other missing-translation behaviors unrelated to the missingMessage, such as logging the key somewhere.

r.I18n.on('missing', function(key, context) {
ber.Logger.warn("Missing translation: " + key);

Using with Ember-cli

Install ember-i18n as node module:

install ember-i18n --save-dev

Run generator to fetch dependencies:

r generate ember-i18n

That's it.

Limitations

• There is no way to pass interpolations to attribute translations. I can't think of a syntax to support this. It might be possible to look up interpolations from the current context.
• Em.I18n.translations must be fully populated before Ember renders any views. There are no bindings on the translations themselves, so Ember will not know to re-render views when translations change.

Building

For more detail on running tests and contributing, see CONTRIBUTING.md.