Как правильно реализовать изменение шаблона?

Question

[Igor Belikov]

Всем привет!
Изучаю backbone. Использую requirejs-i18n.
Есть конфиг по умолчанию:

require.config
  config:
    i18n:
      locale: 'ru-ru'

Задача:
По клику на определенный язык - подгрузить словарь выбранного языка и изменить значения в шаблоне.

Вопрос:
Как правильно реализовать вывод переменных в шаблон?
Создать для каждого блока свое представление?
К примеру есть блок "копирайт", есть блок "написать нам". Соответственно я хочу, что при смене языка оно переводилось на другой язык.

И как я понял уже, то нужно как-то добавить эвент о смене локали (языка) и чтобы все части, которые мультиязычные - реагировали на него и подгружали язык?

ps
я надеюсь, что задача понятна, просто меня интересует ее правильная реализация с точки зрения фреймворка

Answer 1

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

Шаблоны можно одинаковые для всех языков. Просто весь текст надо выводить через переменные. А переменные эти, текущую локаль, пробрасывать в шаблонизатор вместе с данными от вьюх. Я всегда в бэкбоновских приложениях использую некий менеджер шаблонов, который отвечает, в том числе, за проброс сквозных данных в шаблоны.

И как я понял уже, то нужно как-то добавить эвент о смене локали (языка) и чтобы все части, которые мультиязычные - реагировали на него и подгружали язык?

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

Comments

[Алексей Уколов]

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

Если, например, речь о каком-то редакторе, то проще обновить на лету, чем делать систему сохранения в localStorage и доставания оттуда при перезагрузке (при условии, что такая система изначально не нужна). Просто в качестве дополнения.

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

Алексей Уколов: если редактор, то автосохранение надо в любом случае делать, даже если локаль не меняется:)

[Igor Belikov]

Константин Китманов: А примером кода сможете поделиться? Хотя бы наброски :-)

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

Igor Belka: hogart.github.io/skull/docs/Skull.Template.html
https://github.com/hogart/skull/blob/master/src/Sk...
такого плана

Answer 2

[Алексей]

//объявляем глобальную переменную - можно где нибудь в index.html или где удобно с языком по-умолчанию:
SYSTEM = {
    lang: ru
}

var template = Handlebars.compile(templateTpl);

//Наряду с переменными передаваемыми в шаблон, передаём объект с переводами
var  lang: = {
        ru: {
             name: "Имя"
        },
        en: {
             name: "Name"
        }
}

var data = {
    myVar1: '',
    myVar2: ''
}

var templateData = $.extend({}, {lang: lang[SYSTEM.lang]}, data);
this.$el.append(template(templateData));

Темлейт:

<div>
    <span>{{lang.name}}</span>
    <span>{{myVar1}}</span>
    <span>{{myVar2}}</span>
</div>

Меняем язык и вызываем перерисовку страницы - что-то типа:

SYSTEM.lang = 'en';
Backbone.history.navigate(window.location, {trigger:true});