igorbelikov
@igorbelikov
Fullstack Developer

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

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


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

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

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

ps
я надеюсь, что задача понятна, просто меня интересует ее правильная реализация с точки зрения фреймворка
  • Вопрос задан
  • 301 просмотр
Пригласить эксперта
Ответы на вопрос 2
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Шаблоны можно одинаковые для всех языков. Просто весь текст надо выводить через переменные. А переменные эти, текущую локаль, пробрасывать в шаблонизатор вместе с данными от вьюх. Я всегда в бэкбоновских приложениях использую некий менеджер шаблонов, который отвечает, в том числе, за проброс сквозных данных в шаблоны.

И как я понял уже, то нужно как-то добавить эвент о смене локали (языка) и чтобы все части, которые мультиязычные - реагировали на него и подгружали язык?
Для простоты можно просто перегружать всю страницу. Смена языка на лету — действие достаточно редкое, можно не заморачиваться особо-то.
Ответ написан
Murmurianez
@Murmurianez
JavaScript Developer
//объявляем глобальную переменную - можно где нибудь в 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});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы