vegarringdal/app.html

## app.html
<template>
  <require from="./my-element"></require>
  <require from="./my-template"></require>
  <h1>Aurelia has been loaded</h1>
  <my-element>
    <my-template model.bind="appModel">
      element property: ${elementProperty}<br/>
      model title: ${title}
    </my-template>
  </my-element>

  <hr />

  <my-element>
    <my-template model.bind="appModel">
      element property: ${elementProperty}
      <div repeat.for="num of [1,2,3,4,5]">
        item: ${num}<br />
        element property: ${elementProperty}<br/>
        model title: ${title}
        <hr/>
      </div>
    </my-template>
  </my-element>
</template>

## app.js
export class App {
  appModel = {
    num: 1,
    str: 'Hello World!',
    title: 'the app model'
  };
  repeat = 20;
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

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

## my-element.html
<template>
  <div>I'm a template</div>
  <div ref="templateTarget"></div>
</template>

## my-element.js
import {Container, inject} from 'aurelia-framework';
import {bindable, ViewCompiler, ViewResources, ViewSlot} from 'aurelia-templating';

@inject(Element, ViewCompiler, ViewResources, Container)
export class MyElement {
  elementProperty = 20;

  constructor(element, viewCompiler, viewResources, container) {
    this.element = element;
    this.viewCompiler = viewCompiler;
    this.viewResources = viewResources;
    this.container = container;

    this.templateElement = this.element.querySelector('my-template');
  }

  created() {

  }

  attached() {
    if (this.templateElement) {
      this._template = this.templateElement.au.controller.viewModel.template;
      this._templateModel = this.templateElement.au.controller.viewModel.model;
      this.useTemplate();
    }

  }

  useTemplate() {
    let template = this._template;
    let model = this._templateModel;
    let viewFactory = this.viewCompiler.compile(`<template>${template}</template>`, this.viewResources);
    let view = viewFactory.create(this.container);
    this.viewSlot = new ViewSlot(this.templateTarget, true);
    this.viewSlot.add(view);
    this.viewSlot.bind(this, {
      bindingContext: this,
      parentOverrideContext: model
       });

    this.viewSlot.attached();
  }
}

## my-template.js
import {inject} from 'aurelia-framework';
import {customElement, bindable, noView, processContent, TargetInstruction} from 'aurelia-templating';

@customElement('my-template')
@noView()
@processContent((compiler, resources, element, instruction) => {
  let html = element.innerHTML;
  if (html !== '') {
    instruction.template = html;
  }
  element.innerHTML = '';
})
@inject(TargetInstruction)
export class MyTemplate {
  @bindable() model;

  constructor(targetInstruction) {
    this.template = targetInstruction.elementInstruction.template;
  }
}
	<template>
	<require from="./my-element"></require>
	<require from="./my-template"></require>
	<h1>Aurelia has been loaded</h1>
	<my-element>
	<my-template model.bind="appModel">
	element property: ${elementProperty}<br/>
	model title: ${title}
	</my-template>
	</my-element>

	<hr />

	<my-element>
	<my-template model.bind="appModel">
	element property: ${elementProperty}
	<div repeat.for="num of [1,2,3,4,5]">
	item: ${num}<br />
	element property: ${elementProperty}<br/>
	model title: ${title}
	<hr/>
	</div>
	</my-template>
	</my-element>
	</template>
	export class App {
	appModel = {
	num: 1,
	str: 'Hello World!',
	title: 'the app model'
	};
	repeat = 20;
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<div>I'm a template</div>
	<div ref="templateTarget"></div>
	</template>
	import {Container, inject} from 'aurelia-framework';
	import {bindable, ViewCompiler, ViewResources, ViewSlot} from 'aurelia-templating';

	@inject(Element, ViewCompiler, ViewResources, Container)
	export class MyElement {
	elementProperty = 20;

	constructor(element, viewCompiler, viewResources, container) {
	this.element = element;
	this.viewCompiler = viewCompiler;
	this.viewResources = viewResources;
	this.container = container;

	this.templateElement = this.element.querySelector('my-template');
	}

	created() {

	}

	attached() {
	if (this.templateElement) {
	this._template = this.templateElement.au.controller.viewModel.template;
	this._templateModel = this.templateElement.au.controller.viewModel.model;
	this.useTemplate();
	}

	}

	useTemplate() {
	let template = this._template;
	let model = this._templateModel;
	let viewFactory = this.viewCompiler.compile(`<template>${template}</template>`, this.viewResources);
	let view = viewFactory.create(this.container);
	this.viewSlot = new ViewSlot(this.templateTarget, true);
	this.viewSlot.add(view);
	this.viewSlot.bind(this, {
	bindingContext: this,
	parentOverrideContext: model
	});

	this.viewSlot.attached();
	}
	}
	import {inject} from 'aurelia-framework';
	import {customElement, bindable, noView, processContent, TargetInstruction} from 'aurelia-templating';

	@customElement('my-template')
	@noView()
	@processContent((compiler, resources, element, instruction) => {
	let html = element.innerHTML;
	if (html !== '') {
	instruction.template = html;
	}
	element.innerHTML = '';
	})
	@inject(TargetInstruction)
	export class MyTemplate {
	@bindable() model;

	constructor(targetInstruction) {
	this.template = targetInstruction.elementInstruction.template;
	}
	}