Vallabharayudu/app.html

## app.html
<template>
  <require from="styles.css"></require>
  <require from="tree-view"></require>
<tree-view></tree-view>
</template>

## app.js
export class App{

}


## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body aurelia-app="main">
    <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>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation');

  aurelia.start().then(() => aurelia.setRoot());
}

## node-model.js
export class NodeModel{

    Name;
    children;
    id;

    constructor(Name, id, children){
      this.Name = Name;
      this.id= id;
      this.children = children;

    }


}

## styles.css
/* todo: add styles */

## tree-node.html
<template>

	<div class="panel-group" id="accordion${current.id}" role="tablist" aria-multiselectable="true">
		<div class="panel panel-default">

			<div class="panel-heading" role="tab" id="heading${current.id}">
				<h4 class="panel-title">
					<a role="button" data-toggle="collapse" data-parent="#accordion${current.id}" href="#collapse${current.id}" aria-expanded="true" aria-controls="collapseOne">
						${current.Name}
					</a>
				</h4>
			</div>

			<div id="collapse${current.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading${current.id}">
				<div class="panel-body">

					<tree-node repeat.for="node of current.children" current.bind="node"></tree-node>

				</div>
			</div>

		</div>

	</div>
</template>

## tree-node.js
import {Behavior} from 'aurelia-framework';
import {bindable} from 'aurelia-framework';

export class TreeNode {
  @bindable current = null;
}

## tree-view.html
<template>
  <require from='./tree-node'></require>

  <tree-node repeat.for="node of nodes" current.bind="node"></tree-node>

</template>

## tree-view.js
import {Behavior} from 'aurelia-framework';
import {NodeModel} from 'node-model';

export class TreeView {
  constructor(){

    var oregon = new NodeModel('Team A',1,[new NodeModel('Team A-1',11,null),
                                          new NodeModel('Team A-2',11,null)
                                          ]
                      )

    this.nodes = [oregon];
  }
}
	<template>
	<require from="styles.css"></require>
	<require from="tree-view"></require>
	<tree-view></tree-view>
	</template>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body aurelia-app="main">
	<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>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}
	export class NodeModel{

	Name;
	children;
	id;

	constructor(Name, id, children){
	this.Name = Name;
	this.id= id;
	this.children = children;

	}


	}
	<template>

	<div class="panel-group" id="accordion${current.id}" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default">

	<div class="panel-heading" role="tab" id="heading${current.id}">
	<h4 class="panel-title">
	<a role="button" data-toggle="collapse" data-parent="#accordion${current.id}" href="#collapse${current.id}" aria-expanded="true" aria-controls="collapseOne">
	${current.Name}
	</a>
	</h4>
	</div>

	<div id="collapse${current.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading${current.id}">
	<div class="panel-body">

	<tree-node repeat.for="node of current.children" current.bind="node"></tree-node>

	</div>
	</div>

	</div>

	</div>
	</template>
	import {Behavior} from 'aurelia-framework';
	import {bindable} from 'aurelia-framework';

	export class TreeNode {
	@bindable current = null;
	}
	<template>
	<require from='./tree-node'></require>

	<tree-node repeat.for="node of nodes" current.bind="node"></tree-node>

	</template>
	import {Behavior} from 'aurelia-framework';
	import {NodeModel} from 'node-model';

	export class TreeView {
	constructor(){

	var oregon = new NodeModel('Team A',1,[new NodeModel('Team A-1',11,null),
	new NodeModel('Team A-2',11,null)
	]
	)

	this.nodes = [oregon];
	}
	}