在客户端javascript中将i18next与XHR后端一起使用 [英] Use i18next with XHR backend in client-side javascript

问题描述

i18next-xhr-backend 上的文档告诉我使用import加载他们的模块.但是，当我使用import语句时，什么也没有发生，并且Firefox在开发人员控制台中为我提供了SyntaxError:

The documentation at i18next-xhr-backend tells me to use import to load their module. But when I use the import-statement, nothing happens and Firefox gives me a SyntaxError in the developer console:

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

那么我如何在XHR后端上使用i18next库?如果.use(XHR)行和相应的导入被注释掉(Warning: i18next::backendConnector: No backend was added via i18next.use. Will not load resources.)，则以下代码示例有效.但如果失败，则失败:ReferenceError: XHR is not defined

So how can I use i18next library with the XHR-backend? The following code example works if the .use(XHR)-line and the corresponding import is commented out (Warning: i18next::backendConnector: No backend was added via i18next.use. Will not load resources.). But it fails, if it is not: 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();

推荐答案

我需要使用i18nextXHRBackend而不是仅仅使用XHR，因为这是类被加载的名称，就好像没有使用任何加载器一样.正如 README.md 所说:

I needed to use i18nextXHRBackend instead of just XHR, since that is the name the class gets loaded as if no loader is used. As the README.md says:

如果您不使用模块加载器，它将被添加到window.i18nextXHRBackend

If you don't use a module loader it will be added to window.i18nextXHRBackend

我以前没有看到过，我也不知道这种情况会自动发生，但是，如果不使用模块加载器，似乎必须自己找出来.吸取了教训，希望这将有助于其他新手继续使用javascript中的模块.因此，我完整的localisation.js看起来像这样:

I didn't see that before, and I didn't know that this will happen automatically, but it seems that you have to find that out on your own if not using a module loader. Lesson learned, hopefully this will help some other newbies being stuck on how to use modules in javascript. Therefore, my complete localisation.js looks like this:

$(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");
            });
        });
    });
});

这篇关于在客户端javascript中将i18next与XHR后端一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！