jdanyow/app.html

## app.html
<template>
  <require from="./grid/grid"></require>
  <require from="./grid/cell-template"></require>
  <require from="./grid/row-template"></require>

  <grid class="table" items.bind="people">
    <row-template>
      <div class="tr">
        <content></content>
      </div>
    </row-template>
    <cell-template><div class="td">${$index}</div></cell-template>
    <cell-template><div class="td">${firstName}</div></cell-template>
    <cell-template><div class="td">${lastName}</div></cell-template>
  </grid>
</template>

## app.js
export class App {
  people = [
    { firstName: 'Rob', lastName: 'Eisenberg' },
    { firstName: 'Jeremy', lastName: 'Danyow' },
    { firstName: 'Matt', lastName: 'Broadst' }];
}

## grid\cell-template.js
import {
  inject,
  processContent,
  noView,
  ViewCompiler
} from 'aurelia-framework';
import {Grid} from './grid';

@inject(Element, ViewCompiler, Grid)
@processContent(false)
@noView
export class CellTemplate {
  constructor(element, viewCompiler, grid) {
    let template = `<template>${element.innerHTML}</template>`;
    let viewFactory = viewCompiler.compile(template);
    grid.cellViewFactories.push(viewFactory);
  }
}

## grid\grid.html
<template>
  <content></content>
</template>

## grid\grid.js
import {
  inject,
  ViewSlot,
  processContent,
  noView,
  containerless,
  bindable,
  createOverrideContext
} from 'aurelia-framework';

@inject(ViewSlot)
export class Grid {
  @bindable items;

  cellViewFactories = [];
  rowViewFactory = null;

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

  bind(bindingContext, overrideContext) {
    this.render(this.bindingContext, this.overrideContext);
  }

  render(bindingContext, overrideContext) {
    let items = this.items;
    for (let y = 0, yy = items.length; y < yy; y++) {
      let rowBindingContext = items[y];
      let rowOverrideContext = createOverrideContext(rowBindingContext, overrideContext);
      rowOverrideContext.$first = y === 0;
      rowOverrideContext.$last = y === yy - 1;
      rowOverrideContext.$index = y;
      let rowView = this.rowViewFactory.create();
      let rowViewSlot = new ViewSlot(rowView.contentSelectors[0].anchor.parentNode, true);
      this.viewSlot.add(rowView);
      for (let x = 0, xx = this.cellViewFactories.length; x < xx; x++) {
        let cellViewFactory = this.cellViewFactories[x];
        let cellView = cellViewFactory.create();
        cellView.bind(rowBindingContext, rowOverrideContext);
        rowViewSlot.add(cellView);
      }
    }
  }
}

## grid\row-template.js
import {
  inject,
  processContent,
  noView,
  ViewCompiler
} from 'aurelia-framework';
import {Grid} from './grid';

@inject(Element, ViewCompiler, Grid)
@processContent(false)
@noView
export class RowTemplate {
  constructor(element, viewCompiler, grid) {
    let template = `<template>${element.innerHTML}</template>`;
    let viewFactory = viewCompiler.compile(template);
    grid.rowViewFactory = viewFactory;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      .table {
        display: table;
      }
      .tr {
        display: table-row;
      }
      .td {
        display: table-cell;
      }
    </style>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
	<template>
	<require from="./grid/grid"></require>
	<require from="./grid/cell-template"></require>
	<require from="./grid/row-template"></require>

	<grid class="table" items.bind="people">
	<row-template>
	<div class="tr">
	<content></content>
	</div>
	</row-template>
	<cell-template><div class="td">${$index}</div></cell-template>
	<cell-template><div class="td">${firstName}</div></cell-template>
	<cell-template><div class="td">${lastName}</div></cell-template>
	</grid>
	</template>
	export class App {
	people = [
	{ firstName: 'Rob', lastName: 'Eisenberg' },
	{ firstName: 'Jeremy', lastName: 'Danyow' },
	{ firstName: 'Matt', lastName: 'Broadst' }];
	}
	import {
	inject,
	processContent,
	noView,
	ViewCompiler
	} from 'aurelia-framework';
	import {Grid} from './grid';

	@inject(Element, ViewCompiler, Grid)
	@processContent(false)
	@noView
	export class CellTemplate {
	constructor(element, viewCompiler, grid) {
	let template = `<template>${element.innerHTML}</template>`;
	let viewFactory = viewCompiler.compile(template);
	grid.cellViewFactories.push(viewFactory);
	}
	}
	import {
	inject,
	ViewSlot,
	processContent,
	noView,
	containerless,
	bindable,
	createOverrideContext
	} from 'aurelia-framework';

	@inject(ViewSlot)
	export class Grid {
	@bindable items;

	cellViewFactories = [];
	rowViewFactory = null;

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

	bind(bindingContext, overrideContext) {
	this.render(this.bindingContext, this.overrideContext);
	}

	render(bindingContext, overrideContext) {
	let items = this.items;
	for (let y = 0, yy = items.length; y < yy; y++) {
	let rowBindingContext = items[y];
	let rowOverrideContext = createOverrideContext(rowBindingContext, overrideContext);
	rowOverrideContext.$first = y === 0;
	rowOverrideContext.$last = y === yy - 1;
	rowOverrideContext.$index = y;
	let rowView = this.rowViewFactory.create();
	let rowViewSlot = new ViewSlot(rowView.contentSelectors[0].anchor.parentNode, true);
	this.viewSlot.add(rowView);
	for (let x = 0, xx = this.cellViewFactories.length; x < xx; x++) {
	let cellViewFactory = this.cellViewFactories[x];
	let cellView = cellViewFactory.create();
	cellView.bind(rowBindingContext, rowOverrideContext);
	rowViewSlot.add(cellView);
	}
	}
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>
	.table {
	display: table;
	}
	.tr {
	display: table-row;
	}
	.td {
	display: table-cell;
	}
	</style>
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>