ajayvikas/app.html

## app.html
<template>
    <require from="./grid"></require>
    <require from="./grid-column"></require>
    <grid items.bind="orders">
        <grid-column field="id" title="ID"></grid-column>
        <grid-column field="rate" title="RATE"></grid-column>
        <grid-column field="qty" title="QTY"></grid-column>
        <grid-column field="amount" title="AMT"></grid-column>
    </grid>
</template>

## app.js
export class App {
    constructor() {
        this.orders = [
            {id: 1, rate: 10, qty: 1, amount: 10},
            {id: 2, rate: 15, qty: 2, amount: 30},
            {id: 3, rate: 20, qty: 3, amount: 60},
        ];
    }
}

## grid-column.js
import {customElement, bindable, inlineView} from 'aurelia-framework';
import {Grid} from "./grid";

@customElement("grid-column")
@inlineView('<template><slot></slot></template>')
export class GridColumn {
    @bindable field: string;
    @bindable title: string;
}

## grid.html
<template>
    <div>First Block: Rendering Cells - before rendering header (Nothing get rendered)</div>
    <div repeat.for="item of items">
        <label repeat.for="column of columns">
            ${item[column.field]}
        </label>
    </div>
    <div>Rendering Header (Works fine)</div>
    <div>
        <label repeat.for="column of columns">
            ${column.title}
        </label>
    </div>
    <div>Second Block: Rendering Cells - after rendering header (Works fine)</div>
    <div repeat.for="item of items">
        <label repeat.for="column of columns">
            ${item[column.field]}
        </label>
    </div>
    <slot></slot>
</template>

## grid.js
import {inject, customElement, children, bindable, BindingEngine, Disposable} from 'aurelia-framework';
import {GridColumn} from "./grid-column";

@customElement("grid")
export class Grid {
    @children("grid-column") columns;
    @bindable items = [];
    attached() {
        console.log(this.columns);
    }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        label {
            display: inline-block;
            width: 50px;
        }
    </style>
    <script src="https://app-examples.azurewebsites.net/jspm_packages/system.js"></script>
    <script src="https://app-examples.azurewebsites.net/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
    <!--
    <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>
    -->
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
  </body>
</html>
	<template>
	<require from="./grid"></require>
	<require from="./grid-column"></require>
	<grid items.bind="orders">
	<grid-column field="id" title="ID"></grid-column>
	<grid-column field="rate" title="RATE"></grid-column>
	<grid-column field="qty" title="QTY"></grid-column>
	<grid-column field="amount" title="AMT"></grid-column>
	</grid>
	</template>
	export class App {
	constructor() {
	this.orders = [
	{id: 1, rate: 10, qty: 1, amount: 10},
	{id: 2, rate: 15, qty: 2, amount: 30},
	{id: 3, rate: 20, qty: 3, amount: 60},
	];
	}
	}
	import {customElement, bindable, inlineView} from 'aurelia-framework';
	import {Grid} from "./grid";

	@customElement("grid-column")
	@inlineView('<template><slot></slot></template>')
	export class GridColumn {
	@bindable field: string;
	@bindable title: string;
	}
	<template>
	<div>First Block: Rendering Cells - before rendering header (Nothing get rendered)</div>
	<div repeat.for="item of items">
	<label repeat.for="column of columns">
	${item[column.field]}
	</label>
	</div>
	<div>Rendering Header (Works fine)</div>
	<div>
	<label repeat.for="column of columns">
	${column.title}
	</label>
	</div>
	<div>Second Block: Rendering Cells - after rendering header (Works fine)</div>
	<div repeat.for="item of items">
	<label repeat.for="column of columns">
	${item[column.field]}
	</label>
	</div>
	<slot></slot>
	</template>
	import {inject, customElement, children, bindable, BindingEngine, Disposable} from 'aurelia-framework';
	import {GridColumn} from "./grid-column";

	@customElement("grid")
	export class Grid {
	@children("grid-column") columns;
	@bindable items = [];
	attached() {
	console.log(this.columns);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style>
	label {
	display: inline-block;
	width: 50px;
	}
	</style>
	<script src="https://app-examples.azurewebsites.net/jspm_packages/system.js"></script>
	<script src="https://app-examples.azurewebsites.net/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	<!--
	<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>
	-->
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>
	</body>
	</html>