Локализация приложений на Backbone.js
Backbone.js

Локализация приложений на Backbone.js

В статье мы рассмотрим пример локализации Backbone.js приложения с помощью Polyglot.js.

Polyglot.js

Polyglot.js — это небольшая библиотека oт Airbnb, позволяющая легко и удобно реализовывать многоязычные javascript-приложения. Polyglot.js может использоваться как на клиенте, так и на сервере.

Работать с библиотекой Polyglot.js тоже достаточно просто и удобно. Всего лишь нужно создать новый объект Polyglot и передать ему объект, содержащий языковую константу и ее перевод для текущего языка:


var polyglot = new Polyglot({ phrases: { 'hello': 'Hello' } });

После этого, там, где нужно использовать фразу на текущем языке, можно вызвать метод перевода:


polyglot.t('hello'); // Hello

Интеграция Polyglot.js в Backbone.js приложение

Представим, что Backbone.js-приложение у нас инициализируется следующим скриптом:


(function(global, $) {
    'use strict';
    var App = {
        Models: {},
        Collections: {},
        Views: {},
        
        initialize: function() { ... }
    }
      
    $(function() {
        App.initialize();
    });
})(window, jQuery);

Локаль пользователя будем хранить в localStorage. Для получения и сохранения локали добавим объекту App два метода:


getLocale: function() {
    var locale = global.localStorage.getItem('locale');
    return locale ? locale : 'en';
},

setLocale: function(value) {
    global.localStorage.setItem('locale', value);
},

В методе initialize мы должны получить набор переводов для текущей локали и создать объект Polyglot, который в дальшейшем будем использовать для перевода:


$.when($.getJSON('/assets/lang/' + App.getLocale() + '.json'))
.then(function(data) {
    App.polyglot = new Polyglot({ phrases: data });
    
    // инициализация приложения ...
});

Перевод фраз в шаблонах

Теперь, когда мы создали объект App.polyglot, мы можем использовать его для перевода фраз. Например, в шаблоне Underscore.js:


<%= App.polyglot.t('logged_as') %>

Если вы используете шаблонизатор Handlebars.js, не позволяющий выполнять произвольную логику в шаблоне, можно реализовать простой хелпер для перевода:


Handlebars.registerHelper('translate', function(code) {
    return App.polyglot.t(code);
});

В этом случае, перевод фразы в шаблоне будет осуществляться следующим образом:


{{ translate 'logged_as' }}
Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться