I need help with interpolation in i18n.
I'm doing everything as written in the documentation, but I still get an error.
i18next::interpolator: missed to pass in variable what for interpolating {{what}} some kind of sht.
My code:
<body>
<span data-i18n="key" data-i18n-options='{ "what": "i18n"}'></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/8.1.0/i18next.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.0/jquery-i18next.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.1/i18nextHttpBackend.min.js"></script>
<script>
i18next.use(window.i18nextHttpBackend).init({
debug: true,
// url.com?lang=en | url.com?lang=ru
lng: new URL(window.location.href).searchParams.get('lang') || 'en',
optionsAttr: 'i18n-options',
useOptionsAttr: true,
backend: {
loadPath: './i18n/{{lng}}.json',
},
},
function(err, t) {
jqueryI18next.init(i18next, $);
$('[data-i18n]').localize();
},
);
</script>
</body>
en.json (as same as any other language for testing):
{
"key": "{{what}} some kind of sht."
}
jquery.i18n doc: enter link description here | i18next doc: enter link description here
What's wrong?
I think you are mixing the jqueryI18next.init options with i18next.init options.
optionsAttr and useOptionsAttr should probably be set in jqueryI18next.init.