AshleyGrant/app.html

## app.html
<template>
  <require from='./wizard'></require>

 <wizard>
   <page>
     <p>
       Page 1
     </p>
   </page>
   <page>
     ${names[2]}
   </page>
 </wizard>
</template>

## app.js
export class App {
  names = ['Jane', 'John']
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
      body {
        padding: 20px;
      }
      .form-component {
        display: block;
        margin-bottom: 20px;
      }
    </style>
  </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>

## page.html
<template>
  <slot></slot>
</template>

## page.js
export class Page {

}

## wizard.html
<template>
  <slot></slot>
  <div>
    <button disabled.bind="currentPage === 1" click.trigger="currentPage = currentPage - 1">&lt;&lt;</button>
    <button disabled.bind="currentPage === pages.length - 1" click.trigger="currentPage = currentPage + 1">&gt;&gt;</button>
  </div>
</template>

## wizard.js
import { processContent, children} from 'aurelia-framework';


@processContent(parsePages)
export class Wizard {
  @children('page') pages;
  currentPage = 1;

  attached() {
    console.log('pages', this.pages);
  }
}

function parsePages(compiler, resources, node, instruction) {
  const pages = node.querySelectorAll('page');

  for( let i = 0, numberOfPages = pages.length; i < numberOfPages; i++ ) {
    const page = pages[i];

    page.setAttribute('if.bind', `currentPage === ${i+1}`)
  }

  console.log('node', node)

  console.log('node.innerHTML', node.innerHTML)
  // debugger;
  return true;
}
	<template>
	<require from='./wizard'></require>

	<wizard>
	<page>
	<p>
	Page 1
	</p>
	</page>
	<page>
	${names[2]}
	</page>
	</wizard>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
	<style>
	body {
	padding: 20px;
	}
	.form-component {
	display: block;
	margin-bottom: 20px;
	}
	</style>
	</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>
	<slot></slot>
	<div>
	<button disabled.bind="currentPage === 1" click.trigger="currentPage = currentPage - 1"><<</button>
	<button disabled.bind="currentPage === pages.length - 1" click.trigger="currentPage = currentPage + 1">>></button>
	</div>
	</template>
	import { processContent, children} from 'aurelia-framework';


	@processContent(parsePages)
	export class Wizard {
	@children('page') pages;
	currentPage = 1;

	attached() {
	console.log('pages', this.pages);
	}
	}

	function parsePages(compiler, resources, node, instruction) {
	const pages = node.querySelectorAll('page');

	for( let i = 0, numberOfPages = pages.length; i < numberOfPages; i++ ) {
	const page = pages[i];

	page.setAttribute('if.bind', `currentPage === ${i+1}`)
	}

	console.log('node', node)

	console.log('node.innerHTML', node.innerHTML)
	// debugger;
	return true;
	}