Display Localized Text

Follow these steps to internationalize your site by adding translated text.

A. The Internationalization Files

The folder contains two files:

  1. dictionary.json: stores your translations for different languages.

  2. translator.js: fetches translations as they are needed.

We look at these files in detail.

B. The Dictionary

The dictionary is a simple JSON file that has all of your translations.

Look at the example dictionary that you start with:

    "en-CA": {
        "hello_world": "Hello World!"

The keys at the top level of the dictionary specify locales. Each locale points to an object that holds the translations for that locale. The translations are a mapping from key names to the actual translation string. With this definition, your dictionary is only to have two levels.

    "en-CA": {
        "title": "The Shoe Store"
    "es-ES": {
        "title": "La Zapatería"

Notice that the title key for each locale is the same. That key is what the translator uses for translation. Use the same key across different locales because Adaptive.js pulls in the correct string for you.

C. Using the Translator

The translator is looks up translations for your current or default locale.

The file contains the following code snippet:

], function(I18n, dictionary) {

    var translator = new I18n('en-CA', dictionary);
    return translator;

This file creates your translator. When the translator is created with the new keyword, the default locale is also set to en-CA. When the translator looks for a key, it checks the current locale. If the locale isn't set, the translator looks at the default locale for a translation.

There are two ways in which to use the translator:

  2. Templates

1. The Translator in Views


    function($, BaseView, translator, template){

        return {
            template: template,
            extend: BaseView,
            context: {
                'templateName': 'home',
                'title': function(context) {
                    return translator.translate('title');

Now when this view is evaluated, the title context key has the translation for the current locale.

2. The Translator in Templates

{@translate key="title"/}

D. Changing Locales


// Will log 'La Zapatería'

After you set the locale, all calls to the translator.translate function look for translations for the locale that you set.

Edit in GitHub