mbroadst/app.html

## app.html
<template>
  <require from="./grid/grid"></require>
  <require from="./grid/column"></require>

  <grid rows.bind="people">
    <column>${$index}</column>
    <column>${firstName}</column>
    <column>${lastName}</column>
  </grid>
</template>

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

## grid\column.js
import {inject, processContent, noView, ViewCompiler} from 'aurelia-framework';

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

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

## grid\grid.js
import {
  inject, bindable, children, createOverrideContext,
  ViewSlot, TaskQueue
} from 'aurelia-framework';

@inject(ViewSlot, TaskQueue)
export class Grid {
  @children('column') columns;
  @bindable rows;

  columnViewFactories = [];

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

  bind(bindingContext, overrideContext) {
    //this.taskQueue.queueMicroTask(() => this.render(this.bindingContext, this.overrideContext));
    this.scrapeColumnsForViewFactories();
    this.render(this.bindingContext, this.overrideContext);
  }

  scrapeColumnsForViewFactories() {
    for (let i = 0; i < this.columns.length; ++i)
      this.columnViewFactories.push(this.columns[i].viewFactory);
  }

  render(bindingContext, overrideContext) {
    let rows = this.rows;
    for (let y = 0, yy = rows.length; y < yy; y++) {
      let rowBindingContext = rows[y];
      let rowOverrideContext = createOverrideContext(rowBindingContext, overrideContext);
      rowOverrideContext.$first = y === 0;
      rowOverrideContext.$last = y === yy - 1;
      rowOverrideContext.$index = y;

      // let rowView = this.rowViewFactory.create();
      // this.viewSlot.add(rowView);

      for (let x = 0, xx = this.columnViewFactories.length; x < xx; x++) {
        let cellViewFactory = this.columnViewFactories[x];
        let cellView = cellViewFactory.create();
        cellView.bind(rowBindingContext, rowOverrideContext);

        //rowView.add(cellView);
        this.viewSlot.add(cellView);
      }
    }
  }
}

## 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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.4/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.4/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
	<template>
	<require from="./grid/grid"></require>
	<require from="./grid/column"></require>

	<grid rows.bind="people">
	<column>${$index}</column>
	<column>${firstName}</column>
	<column>${lastName}</column>
	</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';

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

	@inject(ViewSlot, TaskQueue)
	export class Grid {
	@children('column') columns;
	@bindable rows;

	columnViewFactories = [];

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

	bind(bindingContext, overrideContext) {
	//this.taskQueue.queueMicroTask(() => this.render(this.bindingContext, this.overrideContext));
	this.scrapeColumnsForViewFactories();
	this.render(this.bindingContext, this.overrideContext);
	}

	scrapeColumnsForViewFactories() {
	for (let i = 0; i < this.columns.length; ++i)
	this.columnViewFactories.push(this.columns[i].viewFactory);
	}

	render(bindingContext, overrideContext) {
	let rows = this.rows;
	for (let y = 0, yy = rows.length; y < yy; y++) {
	let rowBindingContext = rows[y];
	let rowOverrideContext = createOverrideContext(rowBindingContext, overrideContext);
	rowOverrideContext.$first = y === 0;
	rowOverrideContext.$last = y === yy - 1;
	rowOverrideContext.$index = y;

	// let rowView = this.rowViewFactory.create();
	// this.viewSlot.add(rowView);

	for (let x = 0, xx = this.columnViewFactories.length; x < xx; x++) {
	let cellViewFactory = this.columnViewFactories[x];
	let cellView = cellViewFactory.create();
	cellView.bind(rowBindingContext, rowOverrideContext);

	//rowView.add(cellView);
	this.viewSlot.add(cellView);
	}
	}
	}
	}
	<!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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.4/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.4/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>