Как переключать языки в приложениях Firefox OS?

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

На данный момент я работаю над приложением Firefox OS Boilerplate и добавил <select> на главном экране следующим образом:

<p>
    <label data-l10n-id="language">Language: </label>
    <select id="language">
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
    </select>
</p>

Я также настроил для него простой прослушиватель событий в vanilla JS.

Я искал документы MDN, но не нашел упоминаний о переключении языка.

Не могли бы вы подсказать мне, как программно изменить язык в приложении Firefox OS?


localization firefox-os
person Rahul Desai    schedule 08.12.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Один из подходов — тот, который вы используете: пусть пользователь выбирает язык для приложения. Вы можете сохранить выбор пользователя где-нибудь в приложении (например, localStorage) и при загрузке страницы проверить значение языка и выполнить соответствующие действия, чтобы отобразить весь текст на этом языке. Чтобы реализовать это без использования внешней библиотеки, вы можете иметь глобальный объект со всеми переводами:

var translations = new Object();
translations.en = {
    text1: 'The first text',
    text2: 'The second text'
};
translations.es = {
    text1: 'El primer texto',
    text2: 'El segundo texto'
};

И ваша страница выглядит так:

<span data-translate="text1"></span>
<span data-translate="text2"></span>

Итак, после загрузки страницы и выбора языка пользователем в переменной (скажем, lang), вы выполняете итерацию по всем элементам, имеющим атрибут data-translate, и динамически устанавливаете их содержимое.

var items = document.querySelectorAll('[data-translate]');
for (var i = 0; i < items.length; ++i) {
    var index = items[i].getAttribute('data-translate');
    items[i].innerHTML = translations[lang][index];
}

Другой подход заключается в использовании библиотеки, которая автоматически определяет язык пользователя (из языка системы) и заменяет все переводимые элементы со страницы (вы отмечаете их) соответствующими значениями (которые хранятся в отдельном файле). Например, проверьте webL10n.

Я считаю, что первый подход проще реализовать с помощью webL10n.

person lufte    schedule 08.12.2014
comment
Согласно требованиям, мне нужно использовать первый подход, который вы упомянули. Что такое appropriate actions to show all text in that language? - person Rahul Desai; 08.12.2014
comment
Спасибо друг! Я сделал рабочую демонстрацию по этому поводу: jsfiddle.net/rdesai/rac1fq84 - person Rahul Desai; 09.12.2014