Каким образом организовать локализацию Backbone.js-приложения?

Question

[Евгений]

В данном случае локализацию и интернационализацию можно считать синонимами

Пока что решил для себя хранить настройки локали в отдельной Backbone модели и передавать её каждому представлению.
Может подскажете более интересное и элегантное решение.

// набор параметров локали/интернационализации
var i18n = {
    en : {
        language : 'English',
        greeting : 'Hello'
    },
    ru : {
        language : 'Русский',
        greeting : 'Привет'
    }
};

// В самой модели локали ничего особенного
var LocaleModel = Backbone.Model.extend();

// Некая модель (для примера не имеет значения)
var MyAppModel = Backbone.Model.extend();

// Вьюха приложения, использующая данные локали
var MyAppView = Backbone.View.extend({

    initialize: function(options)
    {
        this.i18n = options.i18n;
        this.i18n.bind('change', this.onLocaleChange, this);
    },

    setLocale: function(locale)
    {
        this.i18n.set(i18n[locale]);
    },

    onLocaleChange: function()
    {
        console.log('locale has been changed to: ' + language);
    }
});

var locale = new LocaleModel(i18n.en);
var app = new MyAppView ({
    model : new MyAppModel({username:'John Doe'}),
    i18n  : locale 
});


// Совсем другая вьюха, но она так же использует текущую локаль
// Смена локали в любом месте затрагивает все подвязанные представления
var OtherAppView = Backbone.View.extend({
    ...
});

var otherApp = new OtherAppView({
    model : new OtherModel(),
    i18n  : locale 
});

пример смены локали

app.setLocale('ru');

в контексте MyAppView можно обратиться к настройкам локали таким образом

this.i18n.get('language');

Посмотреть простенький пример использования

UPD:
Локаль является глобальным объектом и передаётся разным представлениям.

// Мы можем сменить локаль и на это событие отреагируют все подписанные представления.
locale.set(i18n.ru);

Answer 1

[Константин Китманов]

Мне кажется, что локаль относится сугубо к представлению. Соответственно, место ей в шаблонах.

Лучше вообще не использовать для этого модели, т.к. Backbone.Events можно «вмешать» в любой объект.

Comments

[Shedal]

Каким образом место локализации может быть в шаблонах, если локализованные строки — это данные?

[Евгений]

В данном случае модель используется лишь как хранилище и обеспечивает локаль полезными методами (set, get, previous и прочие). Представлению глубоко плевать, является ли локаль backbone-моделью или же это какой-то абстрактный объект.

Backbone.Events не подойдёт, так как событие смены локали придётся вызывать из представления. В моём примере локаль(модель) сама оповещает все представления при смене любого атрибута.

Answer 2

[kuzemchik]

Я приложение структурирую с помощью require.js, для него есть модуль с примерами requirejs.org/docs/api.html#i18n
Изменение локали — это глобальное событие (если только у вас не интерфейс словаря или чего-то где есть несколько частей на разных языках). Я бы и оставил его глобальным, а не таскал за собой модель. Кроме того тянуть все локали одновременно, это же много.

Comments

[Shedal]

В данном случае, LocaleModel, похоже, используется только одной View'хой (которая, судя по всему, сама глобальна), поэтому вполне логично локаль ассоциировать именно с этой View и не показывать её другим View.

[Shedal]

Хотя, если вы говорите об объекте i18n, то соглашусь. Лучше его создать один раз в своём модуле и получать этот объект через define во всех модулях, где необходимо реагировать на его события.

[kuzemchik]

Ммм, в моем понимании, локаль это вещь в разы более ре-юзабельная чем представление. Соответственно иметь под каждое представление свою локаль — как минимум куча дублирования.

[Евгений]

Мой пример максимально упрощён. На самом деле локаль(модель) и есть глобальный объект.
Тянуть все возможные локали не обязательно. Например, сама модель может иметь механизм динамической подгрузки необходимой локали.

Answer 3

[Shedal]

А по-моему, у вас достаточно красиво получилось. Единственное, я бы поместил объект LocaleModel вовнутрь MyAppView. Так как-то более структурированно получается.

А чем вас не устраивает такое решение?

P.S. bind() и unbind() это устаревшие функции underscore. Начиная с какой-то там версии нужно использовать on() и off().

Comments

[Евгений]

LocaleModel нельзя помещать внутрь MyAppView, так как это не единственное представление, которое использует локаль, а она является глобальным объектом.
Спасибо за bind/unbind! Не встречал в доках, что они устаревшие, сказано лишь, что они алиасы.

Answer 4

[Алексей Прохоров]

Обычно выношу локализацию отдельно, реализовал как в Yii, в том числе и с поддержкой склонения числительных. Пока не публиковал код нигде, руки не доходят красиво оформить, но если кому понравится могу поделиться:
App.messages.ru = {
    main: {
        'Hello {subject}': 'Привет'
    }
};
...
var text = App.t('main', 'Hello {subject}', {'{subject}': 'Мир'});

Comments

[Евгений]

Поделитесь, будет интересно покопать

[Алексей Прохоров]

Ok, с утра выложу. Вечером в код лучше не лезть)

[Алексей Прохоров]

jsfiddle.net/rJGs4/1/

[Евгений]

Спасибо! Получится вполне неплохо, если ваш код завернуть в мою модель )

Answer 5

[Сергей Протько]

А зачем хранить локаль в модели?

Comments

[Евгений]

Что бы навесить на неё событие и при смене локали оповещать представления.

[Евгений]

Слегка подредактировал код. Суть в том, что единожды созданная LocaleModel передаётся во все заинтересованные представления и оповещает их все при изменении.

[Сергей Протько]

В этом есть смысл. Возьму на заметку.

Answer 6

[personaljs]

requirejs.org/docs/api.html#i18n