Vallabharayudu/app.html

## app.html
<template>
  <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 name="viewport" content="width=device-width, initial-scale=1">
  </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>-->

    <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>

## node-model.js
export class NodeModel{

  constructor(name, children){
    this.name = name;
    this.children = children || [];
    this.visible = true;
    if(this.hasChildren()){
      this.icon = 'fa fa-minus';
      this.expanded = true;
    }
  }
  hasChildren(){
    return this.children.length > 0;
  }
  toggleNode(){
    for(var i = 0; i < this.children.length; i++){
      this.children[i].visible = !this.children[i].visible;
    }
    this.expanded = !this.expanded;
    if(this.expanded === true){
      this.icon = 'fa fa-minus';
    }
    else{
      this.icon = 'fa fa-plus';
    }
  }
}

## tree-node.html
<template>
  <ul show.bind="current.visible">
    <li>
      <div>
        <span if.bind="current.hasChildren()" click.trigger="current.toggleNode()" class="${current.icon}"></span>
        <span>${current.name}</span>
      </div>

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

    </li>
  </ul>
</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 texas = new NodeModel('Texas',[new NodeModel('Houston'),
                                       new NodeModel('Austin')]);

    var newYork = new NodeModel('New York',[
       new NodeModel('New York City', [new NodeModel('Manhattan'),
                                                              new NodeModel('Brooklyn'),
                                                              new NodeModel('Bronx'),
                                                              new NodeModel('Queens'),
                                                              new NodeModel('Staten Island')]),
       new NodeModel('Buffalo')]);

    var oregon = new NodeModel('Oregon',[new NodeModel('Portland')]);

    var california = new NodeModel('California',[new NodeModel('Los Angeles'),
                                                 new NodeModel('San Francisco')]);
    this.nodes = [texas,newYork,oregon,california];
  }
}
	<template>
	<require from="tree-view"></require>
	<tree-view></tree-view>
	</template>
	<!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://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>-->

	<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>
	export class NodeModel{

	constructor(name, children){
	this.name = name;
	this.children = children \|\| [];
	this.visible = true;
	if(this.hasChildren()){
	this.icon = 'fa fa-minus';
	this.expanded = true;
	}
	}
	hasChildren(){
	return this.children.length > 0;
	}
	toggleNode(){
	for(var i = 0; i < this.children.length; i++){
	this.children[i].visible = !this.children[i].visible;
	}
	this.expanded = !this.expanded;
	if(this.expanded === true){
	this.icon = 'fa fa-minus';
	}
	else{
	this.icon = 'fa fa-plus';
	}
	}
	}
	<template>
	<ul show.bind="current.visible">
	<li>
	<div>
	<span if.bind="current.hasChildren()" click.trigger="current.toggleNode()" class="${current.icon}"></span>
	<span>${current.name}</span>
	</div>

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

	</li>
	</ul>
	</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 texas = new NodeModel('Texas',[new NodeModel('Houston'),
	new NodeModel('Austin')]);

	var newYork = new NodeModel('New York',[
	new NodeModel('New York City', [new NodeModel('Manhattan'),
	new NodeModel('Brooklyn'),
	new NodeModel('Bronx'),
	new NodeModel('Queens'),
	new NodeModel('Staten Island')]),
	new NodeModel('Buffalo')]);

	var oregon = new NodeModel('Oregon',[new NodeModel('Portland')]);

	var california = new NodeModel('California',[new NodeModel('Los Angeles'),
	new NodeModel('San Francisco')]);
	this.nodes = [texas,newYork,oregon,california];
	}
	}