Skip to content

Instantly share code, notes, and snippets.

@mreiche
Created December 23, 2016 13:27
Show Gist options
  • Save mreiche/4f2c8fbc4712745e1b020afabb75ef44 to your computer and use it in GitHub Desktop.
Save mreiche/4f2c8fbc4712745e1b020afabb75ef44 to your computer and use it in GitHub Desktop.
Aurelia + i18n + dynamic namespaces
<template>
<ul>
<li>Standard Namespace: <span tr="standard:hello">pl</span></li>
<li>Custom Namespace: <span tr="custom:hello">pl</span></li>
</ul>
<button click.trigger="changeLocale('de')">de</button>
<button click.trigger="changeLocale('en')">en</button>
</template>
//import {BindingSignaler} from 'aurelia-templating-resources';
import {I18N} from 'aurelia-i18n';
import {inject} from 'aurelia-framework';
@inject(I18N,Element)
export class App {
constructor(i18n,element) {
this.i18n = i18n;
this.element = element;
this.i18n.i18next.loadNamespaces(['custom'],(err,t)=>{
console.log('updated translations on load');
this.i18n.updateTranslations(this.element);
});
}
attached() {
/*console.log('updates translations on attach');
this.i18n.updateTranslations(this.element);*/
}
changeLocale(locale) {
this.i18n.setLocale(locale);
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/valichek/aurelia-bundle/i18n-0.5.2v0.0.4/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/valichek/aurelia-bundle/i18n-0.5.2v0.0.4/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
{
"hello":"Hallo neumodische Welt"
}
{
"hello":"Hallo Welt"
}
{
"hello":"Hello custom world"
}
{
"hello":"Hello World"
}
import Backend from 'i18next-xhr-backend';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-i18n', (instance) => {
// register backend plugin
instance.i18next.use(Backend);
// adapt options to your needs (see http://i18next.com/docs/options/)
return instance.setup({
backend: { // <-- configure backend settings
loadPath: 'locale-{{lng}}-{{ns}}.json' // <-- XHR settings for where to get the files from
},
lowerCaseLng:true,
//load:'languageOnly',
ns: ['standard'],
defaultNS:'standard',
fallbackNS:'standard',
lng : 'de',
fallbackLng:'de',
attributes : ['tr'],
debug : false
});
});
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment