ajayvikas/app.html

## app.html
<template>
    <require from="./summary"></require>
    <require from="./dynamic-comp"></require>
    <summary items.bind="summaryItems">
        <span style="background-color: skyblue">from app:</span>
    </summary>
    <dc></dc>
</template>

## app.js
export class Main {
    summaryItems = ["music", "sports", "reading", "history"];
    constructor() {
    }
}

## dynamic-comp.html
<template>

</template>

## dynamic-comp.js
import {inject, customElement, children, bindable, ViewCompiler, ViewFactory,
    ViewResources, Container, ViewSlot, noView, inlineView, containerless} from 'aurelia-framework';

@inject(Element, ViewCompiler, ViewResources, Container, ViewSlot)
@customElement("dc")
export class DynamicContent {
    constructor(element, viewCompiler, viewResources, container, viewSlot) {
        this.element = element;
        this.viewCompiler = viewCompiler;
        this.viewResources = viewResources;
        this.container = container;
        this.viewSlot = viewSlot;
        let html = `<summary id="sum2" items.bind="summaryItems" class="au-target" au-target-id="20">
                        <span style="background-color: lightgray">from dc:</span>
                    </summary>`;
        let template = `<template>${html}</template>`;
        this.viewFactory = viewCompiler.compile(template, viewResources);
    }
    bind(bindingContext,overrideContext) {
        this.bindingContext = bindingContext;
    }
    attached() {
        console.log2("Firing Attached from Dynamic Component");
        let context = this.bindingContext;
        this.view = this.viewFactory.create(this.container);
        this.view.bind(this, context);
        this.viewSlot.add(this.view);
        this.viewSlot.attached();
    }
    detached() {
        this.viewSlot.detached();
        this.viewSlot.remove(this.view);
        this.view.unbind();
    }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <style>
      span {
          margin-right: 10px;
          max-width: 300px;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div aurelia-app>
       <h1>Loading...</h1>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div style="font-weight: bold">Log</div>
    <div id="log"></div>
    <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>
      createSpan = function(arg) {
          if (arg instanceof Node) arg = arg.outerHTML;
          var span = document.createElement("span");
          span.appendChild(document.createTextNode(arg ? arg : 'undefined'));
          if (!arg) span.style.fontWeight = "bold";
          return span;
      }
      console.log2 = function () {
          var args = arguments;
          var newDiv = document.createElement("div");
          newDiv.style.borderTop = "1px solid #ddd";
          if (args.length > 0) newDiv.appendChild(createSpan(args[0]));
          if (args.length > 1) newDiv.appendChild(createSpan(args[1]));
          if (args.length > 2) newDiv.appendChild(createSpan(args[2]));
          if (args.length > 3) newDiv.appendChild(createSpan(args[3]));
          document.getElementById("log").appendChild(newDiv);
      }
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## summary.html
<template>
    <slot></slot>
    <span repeat.for="item of items">
        <template if.bind="$last==true">${item}</template>
        <template if.bind="$last==false">${item},</template>
    </span>
</template>

## summary.js
import {inject, customElement, children, child, bindable, BindingEngine, Disposable} from 'aurelia-framework';
@inject(Element)
export class Summary {
    @bindable items;
    @child("span") header;
    constructor(element) {
        this.element = element;
        this.items = [];
    }
    bind(bindingContext,overrideContext) {
        //console.log('bind - summary');
    }
    attached() {
        var useType = this.element.parentElement.tagName == "DC" ? "Dynamic Use:" : "Static Use:";
        console.log2("From Summary Comp", useType, "header-value", this.header);
    }
}
	<template>
	<require from="./summary"></require>
	<require from="./dynamic-comp"></require>
	<summary items.bind="summaryItems">
	<span style="background-color: skyblue">from app:</span>
	</summary>
	<dc></dc>
	</template>
	export class Main {
	summaryItems = ["music", "sports", "reading", "history"];
	constructor() {
	}
	}
	import {inject, customElement, children, bindable, ViewCompiler, ViewFactory,
	ViewResources, Container, ViewSlot, noView, inlineView, containerless} from 'aurelia-framework';

	@inject(Element, ViewCompiler, ViewResources, Container, ViewSlot)
	@customElement("dc")
	export class DynamicContent {
	constructor(element, viewCompiler, viewResources, container, viewSlot) {
	this.element = element;
	this.viewCompiler = viewCompiler;
	this.viewResources = viewResources;
	this.container = container;
	this.viewSlot = viewSlot;
	let html = `<summary id="sum2" items.bind="summaryItems" class="au-target" au-target-id="20">
	<span style="background-color: lightgray">from dc:</span>
	</summary>`;
	let template = `<template>${html}</template>`;
	this.viewFactory = viewCompiler.compile(template, viewResources);
	}
	bind(bindingContext,overrideContext) {
	this.bindingContext = bindingContext;
	}
	attached() {
	console.log2("Firing Attached from Dynamic Component");
	let context = this.bindingContext;
	this.view = this.viewFactory.create(this.container);
	this.view.bind(this, context);
	this.viewSlot.add(this.view);
	this.viewSlot.attached();
	}
	detached() {
	this.viewSlot.detached();
	this.viewSlot.remove(this.view);
	this.view.unbind();
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<style>
	span {
	margin-right: 10px;
	max-width: 300px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	</style>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<div aurelia-app>
	<h1>Loading...</h1>
	</div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<div style="font-weight: bold">Log</div>
	<div id="log"></div>
	<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>
	createSpan = function(arg) {
	if (arg instanceof Node) arg = arg.outerHTML;
	var span = document.createElement("span");
	span.appendChild(document.createTextNode(arg ? arg : 'undefined'));
	if (!arg) span.style.fontWeight = "bold";
	return span;
	}
	console.log2 = function () {
	var args = arguments;
	var newDiv = document.createElement("div");
	newDiv.style.borderTop = "1px solid #ddd";
	if (args.length > 0) newDiv.appendChild(createSpan(args[0]));
	if (args.length > 1) newDiv.appendChild(createSpan(args[1]));
	if (args.length > 2) newDiv.appendChild(createSpan(args[2]));
	if (args.length > 3) newDiv.appendChild(createSpan(args[3]));
	document.getElementById("log").appendChild(newDiv);
	}
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<slot></slot>
	<span repeat.for="item of items">
	<template if.bind="$last==true">${item}</template>
	<template if.bind="$last==false">${item},</template>
	</span>
	</template>
	import {inject, customElement, children, child, bindable, BindingEngine, Disposable} from 'aurelia-framework';
	@inject(Element)
	export class Summary {
	@bindable items;
	@child("span") header;
	constructor(element) {
	this.element = element;
	this.items = [];
	}
	bind(bindingContext,overrideContext) {
	//console.log('bind - summary');
	}
	attached() {
	var useType = this.element.parentElement.tagName == "DC" ? "Dynamic Use:" : "Static Use:";
	console.log2("From Summary Comp", useType, "header-value", this.header);
	}
	}