i18next Displayed key instead of value

问题

I have translation.json file in /locales/en/

{
    "app": {
        "name": "Example App"
    }
}

In html, I have:

<a href="/" data-i18n="app.name">

In js:

$(document).ready(function() {

    var language_complete = navigator.language.split("-");
    var language = (language_complete[0]);

    console.log('language', language);

    $.i18n.init({
        lng: language,
        fallbackLng: false,
        debug: false
    }, function() {
        $('a').i18n();
    });
});

It displayed app.name instead of Example App. What i missed in my code? Thanks

回答1:

You have to set useLocalStorage and useDataAttrOptions to true

$.i18n.init({useLocalStorage: true , useDataAttrOptions:true, ....});

回答2:

as of i18next V2, the backend is no longer provided out of the box (see the migration guide), so you're required to define a backend configuration in the init block:

backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
},

if you don't do that, your resources will not be loaded, and translation values will fallback to their respective keys (see the source code).

回答3:

In js it's because $(document).ready doesn't wait for external contents to be loaded. You need to use $(window).on('load',function(){...}).

来源：https://stackoverflow.com/questions/18265036/i18next-displayed-key-instead-of-value