Baudin999/app.html

## app.html
<template>

  <ck-container>

    <compose repeat.for="item of items"
             view="${item.view}.html"
             view-model="${item.view}"
             model.bind="item.model"
             containerless />


   </ck-container>
</template>

## app.js


export class App {
  constructor() {
    this.items = [
      { view:"test" },
      { view:"test", model: { value: "some value" } }
    ];
  }
}

## container.html
<template>

  <h1>My container element</h1>

  <div>
    <slot></slot>
  </div>

</template>

## container.js
import {containerless,customElement} from 'aurelia-framework';

@containerless
@customElement('ck-container')
export class Container {
  constructor() {

  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      compose {
        outline: 3px solid blue;
      }
    </style>

  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper').then(bootstrapper => {
        bootstrapper.bootstrap(aurelia => {
          aurelia.use
            .standardConfiguration()
            .globalResources('container');
        });
      });
    </script>
  </body>
</html>

## test.html
<template>
  <div>${message}</div>
</template>

## test.js
export class Test {
  constructor(message) {
    this.message = "hello world";
  }

  activate(model) {
    if (model) {
      this.message = model.value;
    }
  }
}
	<template>

	<ck-container>

	<compose repeat.for="item of items"
	view="${item.view}.html"
	view-model="${item.view}"
	model.bind="item.model"
	containerless />


	</ck-container>
	</template>


	export class App {
	constructor() {
	this.items = [
	{ view:"test" },
	{ view:"test", model: { value: "some value" } }
	];
	}
	}
	<template>

	<h1>My container element</h1>

	<div>
	<slot></slot>
	</div>

	</template>
	import {containerless,customElement} from 'aurelia-framework';

	@containerless
	@customElement('ck-container')
	export class Container {
	constructor() {

	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>
	compose {
	outline: 3px solid blue;
	}
	</style>

	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper').then(bootstrapper => {
	bootstrapper.bootstrap(aurelia => {
	aurelia.use
	.standardConfiguration()
	.globalResources('container');
	});
	});
	</script>
	</body>
	</html>
	export class Test {
	constructor(message) {
	this.message = "hello world";
	}

	activate(model) {
	if (model) {
	this.message = model.value;
	}
	}
	}