Right-to-left languages support

Backbone.js как фреймворк ориентирован на построение структурированных клиентских приложений, предоставляя модели, коллекции, виды и маршрутизаторы. Поддержка языков с написанием справа налево (Right-to-Left, RTL) не является встроенной функцией Backbone, однако правильная архитектура приложений позволяет интегрировать локализацию и управление направлением текста через виды и шаблоны.

Управление направлением текста на уровне моделей

Модели Backbone хранят состояние данных и бизнес-логику. Для RTL-поддержки важно хранить настройки локали и направления текста:

var UserSettings = Backbone.Model.extend({
    defaults: {
        locale: 'en',
        direction: 'ltr'
    },
    setLocale: function(locale) {
        this.set('locale', locale);
        this.set('direction', (locale === 'ar' || locale === 'he') ? 'rtl' : 'ltr');
    }
});
  • locale — язык интерфейса.
  • direction — направление текста (ltr или rtl).
  • Метод setLocale позволяет автоматически определять направление на основе выбранного языка.

Модели могут использоваться как глобальный источник информации о языке и направлении, который передаётся в виды.

Поддержка RTL в представлениях

Виды Backbone отвечают за отображение данных и обработку событий. Для поддержки RTL важно динамически применять атрибуты и CSS-классы:

var UserView = Backbone.View.extend({
    initialize: function(options) {
        this.listenTo(this.model, 'change:direction', this.updateDirection);
    },
    render: function() {
        this.$el.html('<div class="content">Пример текста</div>');
        this.updateDirection();
        return this;
    },
    updateDirection: function() {
        var dir = this.model.get('direction');
        this.$el.attr('dir', dir);
        this.$el.toggleClass('rtl', dir === 'rtl');
    }
});

Ключевые моменты:

  • Атрибут dir в корневом элементе вида управляет базовым направлением текста.
  • CSS-класс rtl позволяет применять специфические стили для RTL-языков (например, text-align: right, float: right).
  • Событие change:direction обеспечивает динамическое обновление интерфейса при смене языка без перезагрузки страницы.

Интеграция с шаблонами

Backbone.js часто используется с шаблонизаторами, такими как Underscore или Handlebars. Для RTL-поддержки следует учитывать следующие подходы:

  • Использовать условные блоки для выбора классов или атрибутов:
<div class="message <%= direction === 'rtl' ? 'rtl' : 'ltr' %>">
    <%= text %>
</div>
  • Передавать направление из модели в контекст шаблона:
var template = _.template($('#message-template').html());
this.$el.html(template({
    text: this.model.get('text'),
    direction: this.model.get('direction')
}));

Это обеспечивает гибкость и централизованное управление RTL-настройками.

Работа с коллекциями и динамическим контентом

Коллекции Backbone содержат набор моделей и управляют их синхронизацией с сервером. Для RTL важно, чтобы новые элементы автоматически наследовали направление текста:

var MessagesView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.collection, 'add', this.addMessage);
    },
    addMessage: function(message) {
        var messageView = new MessageView({ model: message });
        this.$el.append(messageView.render().el);
    }
});

Каждый MessageView при рендеринге проверяет направление и применяет соответствующие классы и атрибуты, что обеспечивает консистентность интерфейса.

CSS и RTL-адаптация

Для полноценной поддержки RTL следует подготовить отдельные CSS-правила:

.rtl {
    direction: rtl;
    text-align: right;
}

.rtl .float-left {
    float: right;
}

.rtl .float-right {
    float: left;
}
  • .rtl — базовый контейнер для элементов с правосторонним текстом.
  • Изменение float и text-align гарантирует корректное отображение интерфейса.

Использование CSS-классов в сочетании с динамическими атрибутами dir позволяет Backbone-приложениям легко переключаться между LTR и RTL интерфейсами.

Динамическая смена языка

Для приложений с мультиязычной поддержкой Backbone удобно централизованно менять язык и направление:

var settings = new UserSettings({ locale: 'en' });
var userView = new UserView({ model: settings });

settings.setLocale('ar'); // автоматически переключает направление на RTL

Все виды, слушающие изменения модели settings, обновят интерфейс без дополнительного вмешательства.

Итоговая архитектура

  • Модели управляют языком и направлением текста.
  • Виды реагируют на изменения моделей и обновляют DOM с использованием dir и CSS-классов.
  • Шаблоны учитывают направление текста через переменные и условные блоки.
  • CSS обеспечивает визуальное выравнивание и оформление элементов для RTL-языков.
  • Коллекции и динамический контент автоматически наследуют настройки направления от моделей.

Такой подход позволяет Backbone-приложениям корректно поддерживать языки с написанием справа налево, обеспечивая удобство и консистентность интерфейса.

Оглавление