valichek/app.html

## app.html
<template>

  <require from="value-proxy"></require>

  <value-proxy view-model.ref="personJson" value.bind="stringify(person)"></value-proxy>

  ${personJson.value}

</template>

## app.js
import {I18N} from 'aurelia-i18n';
import {inject} from 'aurelia-framework';

@inject(I18N)
export class App {
  message = 'Hello World';

  person = {name: "John Doe"}

  constructor(i18n) {

    this.i18n = i18n;

  }

  changeLocale(locale) {

    this.i18n.setLocale(locale);

  }

  stringify(value) {
    return JSON.stringify(value);
  }

}

## index.html
<!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>

## locale-de-custom.json
{
  "val" : "DE"
}

## locale-de-translation.json
{
  "val1" : "DE-tr1"
}

## locale-en-custom.json
{
  "val" : "EN"
}

## locale-en-translation.json
{
  "val1" : "EN-tr1"
}

## main.js
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
        },
        lng: 'de',
        attributes: ['t', 'i18n'],
        fallbackLng: 'en',
        debug: true,
        //compatibilityJSON: 'v1',
        ns: ['translation', 'custom']
      });
    });

  aurelia.start().then(a => a.setRoot());
}

## value-proxy.js
import {noView, bindable} from 'aurelia-framework';

@noView()
export class ValueProxy {

  @bindable value;

}
	<template>

	<require from="value-proxy"></require>

	<value-proxy view-model.ref="personJson" value.bind="stringify(person)"></value-proxy>

	${personJson.value}

	</template>
	import {I18N} from 'aurelia-i18n';
	import {inject} from 'aurelia-framework';

	@inject(I18N)
	export class App {
	message = 'Hello World';

	person = {name: "John Doe"}

	constructor(i18n) {

	this.i18n = i18n;

	}

	changeLocale(locale) {

	this.i18n.setLocale(locale);

	}

	stringify(value) {
	return JSON.stringify(value);
	}

	}
	<!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>
	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
	},
	lng: 'de',
	attributes: ['t', 'i18n'],
	fallbackLng: 'en',
	debug: true,
	//compatibilityJSON: 'v1',
	ns: ['translation', 'custom']
	});
	});

	aurelia.start().then(a => a.setRoot());
	}
	import {noView, bindable} from 'aurelia-framework';

	@noView()
	export class ValueProxy {

	@bindable value;

	}