Используйте i18next с бэкэндом XHR в клиентском JavaScript - PullRequest
Новая
       11

Используйте i18next с бэкэндом XHR в клиентском JavaScript

0 голосов
/ 02 января 2019

Документация по i18next-xhr-backend подсказывает мне использовать import для загрузки их модуля.Но когда я использую выражение import, ничего не происходит, и Firefox дает мне SyntaxError в консоли разработчика: 

SyntaxError: import declarations may only appear at top level of a module

Так как я могу использовать библиотеку i18next с XHR-бэкендом?Следующий пример кода работает, если строка .use(XHR) и соответствующий импорт закомментированы (Warning: i18next::backendConnector: No backend was added via i18next.use. Will not load resources.).Но это не удастся, если это не так: ReferenceError: XHR is not defined

//import Fetch from 'i18next-fetch-backend';

let t = null;

    i18next
      .use(XHR)
      .init({
        debug: true,
        fallbackLng: ['en'],
        preload: ['en'],
        ns: 'translation',
        defaultNS: 'translation',
        keySeparator: false, // Allow usage of dots in keys
        nsSeparator: false,
        backend: {
          loadPath: '/locales/{{lng}}/{{ns}}.json',
        },
      }, (err, _t) => {
        if (err) {
          reject(err);
          return;
        }

        t = _t;
        //resolve();
      });

jqueryI18next.init(i18next, $, {
    tName: 't', // --> appends $.t = i18next.t
    i18nName: 'i18n', // --> appends $.i18n = i18next
    handleName: 'localize', // --> appends $(selector).localize(opts);
    selectorAttr: 'data-i18n', // selector for translating elements
    targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if different than itself)
    optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true
    useOptionsAttr: false, // see optionsAttr
    parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text
}); 
$(".nav").localize();

1 Ответ

0 голосов
/ 04 января 2019

Мне нужно было использовать i18nextXHRBackend вместо XHR, так как это имя, которое класс загружает, как если бы загрузчик не использовался.Как говорит README.md :

Если вы не используете загрузчик модулей, он будет добавлен в window.i18nextXHRBackend

Я не сделалЯ не видел этого раньше, и я не знал, что это произойдет автоматически, но кажется, что вы должны выяснить это самостоятельно, если не используете загрузчик модулей.Извлеченный урок, надеюсь, это поможет некоторым новичкам застрять в том, как использовать модули в JavaScript.Поэтому мой полный localisation.js выглядит так: 

$(document).ready(function() {
    i18next
        .use(i18nextXHRBackend)
        .use(i18nextBrowserLanguageDetector)
        .init({
            debug: true,
            backend: {
                loadPath: 'locales/{{lng}}/{{ns}}.json',
                addPath: 'locales/add/{{lng}}/{{ns}}'
            }
        }, function(err, t) {
            jqueryI18next.init(i18next, $);
            $('.translatable').localize();
            $('.language-button').click(function() {
                i18next.changeLanguage(this.firstElementChild.alt).then(function(t) {
                $('.translatable').localize(); 
                $('#signupPassword').pwstrength("forceUpdate");
                $('#signupPasswordConfirm').pwstrength("forceUpdate");
            });
        });
    });
});
...