ajoslin103/app.html

## app.html
<template>
  <h1>${message}</h1>
	<compose view-model="content-${type}"></compose>
</template>

## app.js
export class App {
  message = 'Hello World!';
  type = 'video';
}

## content-image.html
<template>
	<div ref="content" class="sub-content content-image">
		<img ref="img" src="http://www.freshairnaturally.com/images/paste27.jpg"></img>
	</div>
</template>

## content-image.js
// import {LogManager} from 'aurelia-framework';
// const Console = LogManager.getLogger('content-image');

import {customElement} from 'aurelia-framework';

@customElement('content-image')
export class ContentImage {

	img; // via ref="img"
}

## content-video.html
<template>
	<div ref="content" class="sub-content content-video">
		<video ref="video" autoplay loop>
			<source ref="source" src="http://media.gettyimages.com/videos/strawberries-in-bowl-rotating-video-id83013877"></source>
		</video>
	</div>
</template>

## content-video.js
// import {LogManager} from 'aurelia-framework';
// const Console = LogManager.getLogger('content-video');

import {customElement} from 'aurelia-framework';

@customElement('content-video')
export class ContentVideo {

	video; // via ref="video"
	source; // via ref="source"
}

## content-video.spec.js
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';

describe('ContentVideo', () => {
	let component;

	beforeEach(() => {
		component = StageComponent
		.withResources('src/content-video')
		.inView(`<compose view-model="content-${type}" class="au-target" au-target-id="2">
					<div ref="content" class="sub-content content-video au-target" au-target-id="3">
						<video ref="video" autoplay="" loop="" class="au-target" au-target-id="4">
							<source ref="source" src="http://media.gettyimages.com/videos/strawberries-in-bowl-rotating-video-id83013877" class="au-target" au-target-id="5">
						</video>
					</div>
				</compose>`)
		.boundTo({
			"type": "video"
		});
	});

	it('should define video - via the ref tag', done => {
		component.create(bootstrap).then(() => {
			expect(component.viewModel.video).toBeDefined();
			done();
		});
	});

	it('should define source - via the ref tag', done => {
		component.create(bootstrap).then(() => {
			expect(component.viewModel.source).toBeDefined();
			done();
		});
	});

	afterEach(() => {
		component.dispose();
	});
});

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <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>
	<template>
	<h1>${message}</h1>
	<compose view-model="content-${type}"></compose>
	</template>
	<template>
	<div ref="content" class="sub-content content-image">
	<img ref="img" src="http://www.freshairnaturally.com/images/paste27.jpg"></img>
	</div>
	</template>
	// import {LogManager} from 'aurelia-framework';
	// const Console = LogManager.getLogger('content-image');

	import {customElement} from 'aurelia-framework';

	@customElement('content-image')
	export class ContentImage {

	img; // via ref="img"
	}
	<template>
	<div ref="content" class="sub-content content-video">
	<video ref="video" autoplay loop>
	<source ref="source" src="http://media.gettyimages.com/videos/strawberries-in-bowl-rotating-video-id83013877"></source>
	</video>
	</div>
	</template>
	import {StageComponent} from 'aurelia-testing';
	import {bootstrap} from 'aurelia-bootstrapper';

	describe('ContentVideo', () => {
	let component;

	beforeEach(() => {
	component = StageComponent
	.withResources('src/content-video')
	.inView(`<compose view-model="content-${type}" class="au-target" au-target-id="2">
	<div ref="content" class="sub-content content-video au-target" au-target-id="3">
	<video ref="video" autoplay="" loop="" class="au-target" au-target-id="4">
	<source ref="source" src="http://media.gettyimages.com/videos/strawberries-in-bowl-rotating-video-id83013877" class="au-target" au-target-id="5">
	</video>
	</div>
	</compose>`)
	.boundTo({
	"type": "video"
	});
	});

	it('should define video - via the ref tag', done => {
	component.create(bootstrap).then(() => {
	expect(component.viewModel.video).toBeDefined();
	done();
	});
	});

	it('should define source - via the ref tag', done => {
	component.create(bootstrap).then(() => {
	expect(component.viewModel.source).toBeDefined();
	done();
	});
	});

	afterEach(() => {
	component.dispose();
	});
	});
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<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>