pKrav75/app.html

## app.html
<template>
 <button click.delegate='addDel($event)'>Go !</button>
 <p>Control memory before and after go ${cnt} </p>
 <label>Count</label> <input type="text" value.bind="maxCnt"></input><p>
 <label>Tempo</label> <input type="text" value.bind="tempo"></input>
 <hr>
 <div id="modules-container"></div>
</template>

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


@inject(I18N, TemplatingEngine)
export class App {
  view = null;
  cnt = 0;
  maxCnt=149;
  tempo = 100;

  constructor(i18n, templatingEngine) {
    this.templatingEngine = templatingEngine;
    this.i18n = i18n;
  }

  add() {
        var htmlContent = `<compose view-model="custom-view" ></compose>`;
        var moduleHtmlContent = $(`<div class="module-container">${htmlContent}</div>`);
        moduleHtmlContent.appendTo('#modules-container');
        this.view = this.templatingEngine.enhance({ element: moduleHtmlContent[0], bindingContext: {}, overrideContext: {} });
        this.view.attached();
    }

    del() {
        if(this.view){
            this.view.detached();
            this.view.unbind();
            this.view = null;
            $('.module-container').remove();
        }
    }

    addDel() {
        this.cnt = 0;
        let _internal = () => {
            if (this.cnt % 2 == 0) {
                this.add();
            } else {
                this.del();
            }
            this.cnt ++;
            if(this.cnt <= this.maxCnt){
                setTimeout(_internal, this.tempo);
            }
        };
        _internal();
    }
}

## custom-view.html
<template>
  <p>
    ${'val1' & t }
  </p>
</template>

## custom-view.js
export class CustomView{
  bind(){
    console.log('Binding custom view');
  }
  unbind(){
    console.log('Unbinding custom view');
  }
}

## 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

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

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

## 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: 'en',
        attributes: ['t', 'i18n'],
        fallbackLng: 'en',
        debug: false,
        ns: ['translation']
      });
    });

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<button click.delegate='addDel($event)'>Go !</button>
	<p>Control memory before and after go ${cnt} </p>
	<label>Count</label> <input type="text" value.bind="maxCnt"></input><p>
	<label>Tempo</label> <input type="text" value.bind="tempo"></input>
	<hr>
	<div id="modules-container"></div>
	</template>
	import { TemplatingEngine } from 'aurelia-templating';
	import {I18N} from 'aurelia-i18n';
	import {inject} from 'aurelia-framework';


	@inject(I18N, TemplatingEngine)
	export class App {
	view = null;
	cnt = 0;
	maxCnt=149;
	tempo = 100;

	constructor(i18n, templatingEngine) {
	this.templatingEngine = templatingEngine;
	this.i18n = i18n;
	}

	add() {
	var htmlContent = `<compose view-model="custom-view" ></compose>`;
	var moduleHtmlContent = $(`<div class="module-container">${htmlContent}</div>`);
	moduleHtmlContent.appendTo('#modules-container');
	this.view = this.templatingEngine.enhance({ element: moduleHtmlContent[0], bindingContext: {}, overrideContext: {} });
	this.view.attached();
	}

	del() {
	if(this.view){
	this.view.detached();
	this.view.unbind();
	this.view = null;
	$('.module-container').remove();
	}
	}

	addDel() {
	this.cnt = 0;
	let _internal = () => {
	if (this.cnt % 2 == 0) {
	this.add();
	} else {
	this.del();
	}
	this.cnt ++;
	if(this.cnt <= this.maxCnt){
	setTimeout(_internal, this.tempo);
	}
	};
	_internal();
	}
	}
	export class CustomView{
	bind(){
	console.log('Binding custom view');
	}
	unbind(){
	console.log('Unbinding custom view');
	}
	}
	<!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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.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: 'en',
	attributes: ['t', 'i18n'],
	fallbackLng: 'en',
	debug: false,
	ns: ['translation']
	});
	});

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