Как использовать i18next? Проблемы с переводами

Я хочу использовать опцию интернационализации на моем веб-сайте jQuery Mobile и jQuery. Я попытался создать пример с документацией на http://i18next.com, но, похоже, мне это не удалось. У кого-нибудь есть опыт работы с i18next?

Вот мой пример:

index.html:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <script src="jquery-mobile/jquery-1.6.4.min.js"       type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0.min.js"  type="text/javascript"></script>
    <script src="js/i18next-1.5.6.min.js"                 type="text/javascript"></script>
    <script src="js/translation.js"                       type="text/javascript"></script>
  </head>
  <body>
    <div data-role="page" id="page">
    <div data-role="content">
      <div id="headline1" data-i18n="headline"></div>
        <table width="100%" border="0" id="menu1" class="menu">
          <tr id="surname">
            <td width="50%" data-i18n="menu.surname"></td>
            <td width="50%">&nbsp;</td>
          </tr>
          <tr id="firstName">
            <td width="50%" data-i18n="menu.firstName"></td>
            <td width="50%">&nbsp;</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Файлы перевода: /locales/de/translation.json

{
  "menu": {
    "surname": "Name:",
    "firstName": "Vorname:"
  },

  "headline": "Daten:",
  "headline_1": "Daten Allgemein:",
  "headline_2": "Daten Speziell:"
}

/locales/en/translation.json

/locales/dev/translation.json

{
  "menu": {
    "surname": "Name:",
    "firstName": "First Name:"
  },

  "headline": "Data:",
  "headline_1": "Daten Common:",
  "headline_2": "Daten Specific:"
}

/js/translation.js

$(document).ready(function(){
  language_complete = navigator.language.split("-");
  language = (language_complete[0]);
  console.log("Sprache (root): %s", language);

  i18n.init({ lng: language });
  i18n.init({ debug: true });
  $(".menu").i18n();
  $("headline").i18n();
});

Я получаю перевод меню «menu.name» вместо ожидаемого «Name:». Для заголовка я не получил перевода, но ожидал "Data:" или "Daten:".

Если я попробую выполнить следующий прямой вызов, я не получу перевода: i18n.t ("menu.surname", {defaultValue: "Name:"});

Кто-нибудь знает, в чем проблема? Или у кого-нибудь есть рабочий пример, соответствующий тому, что я пытаюсь сделать?


javascript html internationalization i18next jquery-mobile
person Thomas    schedule 22.10.2012    source источник

Ответы (2)


arrow_upward
26
arrow_downward

Основная проблема в том, что вы не можете вызвать i18n.t("menu.surname", { defaultValue: "Name:"}); сразу после инициализации, так как загрузка ресурсов с сервера выполняется асинхронно, поэтому в основном вы пытаетесь выполнить перевод до того, как i18next загрузит ресурсы.

Вместо этого загрузите его с помощью обратного вызова:

$(document).ready(function(){
  language_complete = navigator.language.split("-");
  language = (language_complete[0]);
  console.log("Sprache (root): %s", language);

  i18n.init({ lng: language, debug: true }, function() {
      // save to use translation function as resources are fetched
      $(".menu").i18n();
      $("headline").i18n();
  });
});

или используйте флаг для загрузки ресурсов синхронно.

Между прочим: в вашем html-коде на один закрывающий </div> слишком много.

Вызов $("headline").i18n(); должен быть $("#headline").i18n();.

person jamuhl    schedule 22.10.2012
comment
Если это решило вашу проблему, вы можете отметить это как ответ. Так что вопрос закрыт. - person jamuhl; 22.10.2012
comment
Еще один вопрос: если у меня есть перевод текста с видоизмененной гласной (умляут), то я получаю просто �. Если я использую нотацию HTML (например), я вижу нотацию HTML, а не измененную гласную. Что я делаю не так? Спасибо за помощь. - person Thomas; 22.10.2012
comment
Кодировка assert на странице и в json - utf8. ‹Мета-http-экв = контент-тип = текст / html; charset = utf-8 › - person jamuhl; 22.10.2012
comment
Без изменений, у меня по-прежнему символ �. - person Thomas; 22.10.2012
comment
Пример: - Ожидаемый текст: Fläche - Настоящий текст: Fl�che (если Fläche - текст JSON) или Flche (если Flche - текст JSON). Я только изменил тэг mata HTML в index.html. Как установить кодировку для JSON? Мне там тоже нужны изменения? В настоящее время мой файл JSON выглядит так, как описано выше. - person Thomas; 22.10.2012
comment
Это скорее настройка сервера: вы можете посмотреть здесь stackoverflow.com/questions/11363394/ (просто передайте json клиенту в utf-8 - не знаю, как настроить сервер) - person jamuhl; 22.10.2012
comment
У меня нет сервера, поэтому, возможно, мне нужна еще одна возможность интернационализации. Спасибо за помощь. - person Thomas; 22.10.2012
comment
это не инструмент. если вы обслуживаете материал из файловой системы, возможно, вы сохранили файлы json в каком-то формате iso вместо utf8. - person jamuhl; 22.10.2012

arrow_upward

arrow_downward

person    schedule
comment
Для i18n с реализацией backbone.js см. Ссылку ниже с require.js github.com/manishcm/i18n-backbone - person gnganapath; 17.08.2015