Doc: Translation Compiler

Translation Compiler

Default Translation Compiler

ember-i18n includes a default compiler that acts mostly like (unbound) Handlebars. It supports interpolations with dots in them. It emits strings that are marked as HTML-safe.

The compiler treats interpolated values as HTML-unsafe by default. You can get HTML-safe interpolations in two ways:

Mark the interpolated value as HTML-safe:

seeUserMessage: Ember.computed('i18n.locale', 'user.id', function() {
  var userLink = '<a href="/users/' + user.get('id') + '">' + user.get('name') + '</a>';

  return this.get('i18n').t('info.see-other-user', {
    userLink: Ember.String.htmlSafe(userLink)
  });
})

Use triple-stache notation in the translation:

export default {
  'info.see-other-user': "Please see {{{userLink}}}"
};

In general, the first method is preferred because it makes it more difficult to accidentally introduce an XSS vulnerability.

Right-to-Left Support

The compiler also adds Unicode RTL markers around the output if the locale specifies it. You can override this behavior by setting rtl in the locale's configuration file:

// app/locales/ar/config.js:

export default {
  rtl: true
}

Overriding the Compiler

You can override the compiler by defining util:i18n/compile-template. For example, if your translation templates use %{} to indicate an interpolation, you might do

// app/utils/i18n/compile-template.js

const interp = /%\{\s*(.*?)\s*\}/g;
const escape = Ember.Handlebars.Utils.escapeExpression;
const get = Ember.get;

export default function compile(template) {
  return function(context) {
    return template
      .replace(interp, function(i, match) {
        return escape(get(context, match));
      });
  };
}