YardGnomeNinja/app.html

## app.html
<template>
  <button click.delegate="addItem(0)">Add Item to Group 0</button>

  <div id="container0" data-container-group="containerGroup0"></div>
  <div id="container1" data-container-group="containerGroup0"></div>
</template>

## app.js
// Note: The "Enhancer" class being used is wholly superflous to the example.
// Its contents can simply be included in this class. It just happens to mimic my current use case.

import {inject} from 'aurelia-framework';
import {Enhancer} from './enhancer';

@inject(Enhancer)
export class App {
  items = [[0,1,2],[1,2,3]];

  constructor(enhancer) {
    this.enhancer = enhancer;
  }

  attached() {
    // Get the "parent" element containing the content you wish to "enhance"
    var enhanceMyContentElement = document.getElementById('container0');

    // Add some new content to the element
    enhanceMyContentElement.innerHTML = '<div repeat.for="item of items[0]">${item}</div>';

    // Do the work
    this.enhancer.enhance(this, enhanceMyContentElement);
  }

  // Show off that it works!
  addItem(container) {
    this.items[container].push(this.items[container].length);
  }
}

## enhancer.js
import {inject} from 'aurelia-framework';
import {TemplatingEngine} from 'aurelia-templating';

@inject(TemplatingEngine)
export class Enhancer {

  constructor(templatingEngine) {
    this.templatingEngine = templatingEngine;
  }

  // https://www.youtube.com/watch?v=KiqkclCJsZs
  enhance(context, enhancingElement) {

    // Tell the templating engine just the basics for now.

    // The element whose content will be enhanced
    //   and the context the enhanced elements will be associated with.
    this.templatingEngine.enhance({
      element: enhancingElement,
      bindingContext: context
    });
  }
}

## 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>
	<template>
	<button click.delegate="addItem(0)">Add Item to Group 0</button>

	<div id="container0" data-container-group="containerGroup0"></div>
	<div id="container1" data-container-group="containerGroup0"></div>
	</template>
	// Note: The "Enhancer" class being used is wholly superflous to the example.
	// Its contents can simply be included in this class. It just happens to mimic my current use case.

	import {inject} from 'aurelia-framework';
	import {Enhancer} from './enhancer';

	@inject(Enhancer)
	export class App {
	items = [[0,1,2],[1,2,3]];

	constructor(enhancer) {
	this.enhancer = enhancer;
	}

	attached() {
	// Get the "parent" element containing the content you wish to "enhance"
	var enhanceMyContentElement = document.getElementById('container0');

	// Add some new content to the element
	enhanceMyContentElement.innerHTML = '<div repeat.for="item of items[0]">${item}</div>';

	// Do the work
	this.enhancer.enhance(this, enhanceMyContentElement);
	}

	// Show off that it works!
	addItem(container) {
	this.items[container].push(this.items[container].length);
	}
	}
	import {inject} from 'aurelia-framework';
	import {TemplatingEngine} from 'aurelia-templating';

	@inject(TemplatingEngine)
	export class Enhancer {

	constructor(templatingEngine) {
	this.templatingEngine = templatingEngine;
	}

	// https://www.youtube.com/watch?v=KiqkclCJsZs
	enhance(context, enhancingElement) {

	// Tell the templating engine just the basics for now.

	// The element whose content will be enhanced
	// and the context the enhanced elements will be associated with.
	this.templatingEngine.enhance({
	element: enhancingElement,
	bindingContext: context
	});
	}
	}
	<!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>