valichek/app.html

## app.html
<template>

  <require from="./stringify"></require>

  <table>
    <tbody>
      <tr><td>1 row ${{row: 1} | stringify}</td></tr>
      <tr><td>2 row</td></tr>
    </tbody>
  </table>

  <table>
    <tbody>
    <tr repeat.for="row of [1,2,3]" as-element="compose" view.bind="'./custom-view.html'"></tr>
    </tbody>
  </table>

</template>

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

@inject(I18N)
export class App {

  message = 'Hello World';
  prop = "test";

  constructor(i18n) {

    this.i18n = i18n;

  }

  changeLocale(locale) {

    this.i18n.setLocale(locale);

  }

  getLabel(propName) {
    return propName;
  }

}

## custom-view.html

<template>
  <!--<td if.bind="false"><require from="./stringify"></require></td>-->
  <td repeat.for="item of [1,2,3]">${'td'+item | stringify}</td>
  <td if.bind="true"><span repeat.for="span of [1,2,3]">${'span'+span}</span></td>
</template>

## 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",
  "val1test" : "DE-tr1-test"
}

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

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

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

## stringify.js
export class StringifyValueConverter {
  toView(value) {
    return JSON.stringify(value);
  }
}
	<template>

	<require from="./stringify"></require>

	<table>
	<tbody>
	<tr><td>1 row ${{row: 1} \| stringify}</td></tr>
	<tr><td>2 row</td></tr>
	</tbody>
	</table>

	<table>
	<tbody>
	<tr repeat.for="row of [1,2,3]" as-element="compose" view.bind="'./custom-view.html'"></tr>
	</tbody>
	</table>

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

	@inject(I18N)
	export class App {

	message = 'Hello World';
	prop = "test";

	constructor(i18n) {

	this.i18n = i18n;

	}

	changeLocale(locale) {

	this.i18n.setLocale(locale);

	}

	getLabel(propName) {
	return propName;
	}

	}

	<template>
	<!--<td if.bind="false"><require from="./stringify"></require></td>-->
	<td repeat.for="item of [1,2,3]">${'td'+item \| stringify}</td>
	<td if.bind="true"><span repeat.for="span of [1,2,3]">${'span'+span}</span></td>
	</template>
	<!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());
	}
	export class StringifyValueConverter {
	toView(value) {
	return JSON.stringify(value);
	}
	}