Ember.js + i18n: how to arrange language change without reloading the page?

Question

JavaScript

Hello, I used the only (it seems) Ember extension that implements internationalization:
github.com/zendesk/ember-i18n The
question is - how can I change the application language without reloading the page?

Answer 1

As a result, it turned out something like this ...
TranslationsPrototype.
A prototype for working with localizations. If there is no string in the translation, the value from the default locale will be taken. Thus, if something is not translated in other languages, but is in the source code, we will not have an alias or an empty space - there will be an original. For me it's English.

/**
 * Прототип обьекта, содержащего локализации
 * Назначение просто - вернуть обьект с переведенными строками
 * @type {*}
 */
var translationsPrototype = Em.Object.extend({
    defaultLocale:'en',
    currentTranslation:{},
    locales:_locales,
    getLocale:function (localeName) {
        this.currentTranslation = this.locales[localeName];
        for (prop in this.locales[this.defaultLocale]) {
            if (typeof this.currentTranslation[prop] == 'undefined') {
                this.currentTranslation[prop] = this.locales[this.defaultLocale][prop];
            }
        }
        return this.currentTranslation;
    }
});

_locales.
A simple object for storing translations. May be generated on the server side, may be included in the previous prototype. It was easier for me to take it out.

/**
 * Перевод программы
 * @type {Object}
 * @private
 */
_locales = {
    en:{
        'str_one':'Hello',
    },
    ru:{
        'str_one':'Привет',
    },
}

application.
A simple example of application initialization. Override the constructor to get the active language. In practice, language:'en' might look like language:Common.getActiveLanguage() and the application will already start with the desired language.

var Translation = translationsPrototype.create();
var App= Em.Application.create({
    version:'1.0b',
    language:'en',
    debug:0,
    init:function () { //constructor overwrite
        Ember.Namespace.NAMESPACES.push(this);
        Ember.Namespace.PROCESSED = false;
        // вся эта мутня с переводами нужна для живой смены языка в рамках подходов ember
        var translation = Em.Object.extend();
        this.T = translation.create();
        this._setLocale(this.get('language'));
    },
    _setLocale:function (localeName) {
        this.T.setProperties(Translation.getLocale(localeName));
        return this;
    }
});

T = App.T;  // алиас для глобального контекста

Observer
We listen to language changes via App.set('language','XX') and change the locale.

App.addObserver('language', function (object, property) {
    object._setLocale(object.language);
});

template.
Line feed example.

<script type="text/x-handlebars">
    {{T.str_one}}!
</script>

When you change the application language, all lines will be updated at once.
The code responsible for error handling is not included here - you can come up with handling situations with incorrect language yourself.