beatsm/NodeModel.ts

## app.html
<template>
    <require from="tree-node"></require>
    <tree-node repeat.for="node of locations" current.bind="node"></tree-node>
    <button click.trigger="addCardiff()" class="btn btn-default">Add Cardiff</button>
    <button click.trigger="addBristol()" class="btn btn-default">Add Bristol</button>
</template>

## app.ts
3d import {NodeModel} from "node-model";

export class App {
    private locations: NodeModel[];

    constructor() {
        this.locations = [];
        var texas = new NodeModel('Texas',
            [new NodeModel('Houston', []),
                new NodeModel('Austin', [])]);

        console.log(JSON.stringify(texas));

        this.locations = [texas];
    }

    addCardiff(): void {
        var cardiff = new NodeModel('Cardiff',
            [new NodeModel('Cardiff Bay', [])]);
        this.locations.push(cardiff);
    }

    addBristol(): void {
        var bristol = `{"name":"Bristol","children":
                        [{"name":"Easton","children":[],"visible":true},
                        {"name":"Eastville","children":[],"visible":true}],
                        "visible":true,"icon":"fa fa-chevron-down","expanded":true}`;

        var d = JSON.parse(bristol);
        this.locations.push(d);
    }
}

## 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>
  </body>
</html>

## NodeModel.ts
export class NodeModel {
    public name: string;
    public visible: boolean;
    public children: NodeModel[];
    public expanded: boolean;
    public icon: string;

    constructor(name: string, children: NodeModel[])
    {
        this.name = name;
        this.children = children || [];
        this.visible = true;

        if (this.hasChildren()) {
            this.icon = "fa fa-chevron-down";
            this.expanded = true;
        }
    }

    hasChildren(): boolean {
        return this.children.length > 0;
    }

    toggleNode(): void {

        for (var i: number = 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-chevron-down";
        } else {
            this.icon = "fa fa-chevron-right";
        }
    }
}

## tree-node.html
<template>
    <ul show.bind="current.visible" style="list-style-type: none;">
        <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.ts
import {bindable} from 'aurelia-framework';

export class TreeNode {

    @bindable current = null;

}
	<template>
	<require from="tree-node"></require>
	<tree-node repeat.for="node of locations" current.bind="node"></tree-node>
	<button click.trigger="addCardiff()" class="btn btn-default">Add Cardiff</button>
	<button click.trigger="addBristol()" class="btn btn-default">Add Bristol</button>
	</template>
	3d import {NodeModel} from "node-model";

	export class App {
	private locations: NodeModel[];

	constructor() {
	this.locations = [];
	var texas = new NodeModel('Texas',
	[new NodeModel('Houston', []),
	new NodeModel('Austin', [])]);

	console.log(JSON.stringify(texas));

	this.locations = [texas];
	}

	addCardiff(): void {
	var cardiff = new NodeModel('Cardiff',
	[new NodeModel('Cardiff Bay', [])]);
	this.locations.push(cardiff);
	}

	addBristol(): void {
	var bristol = `{"name":"Bristol","children":
	[{"name":"Easton","children":[],"visible":true},
	{"name":"Eastville","children":[],"visible":true}],
	"visible":true,"icon":"fa fa-chevron-down","expanded":true}`;

	var d = JSON.parse(bristol);
	this.locations.push(d);
	}
	}
	<!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>
	</body>
	</html>
	export class NodeModel {
	public name: string;
	public visible: boolean;
	public children: NodeModel[];
	public expanded: boolean;
	public icon: string;

	constructor(name: string, children: NodeModel[])
	{
	this.name = name;
	this.children = children \|\| [];
	this.visible = true;

	if (this.hasChildren()) {
	this.icon = "fa fa-chevron-down";
	this.expanded = true;
	}
	}

	hasChildren(): boolean {
	return this.children.length > 0;
	}

	toggleNode(): void {

	for (var i: number = 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-chevron-down";
	} else {
	this.icon = "fa fa-chevron-right";
	}
	}
	}
	<template>
	<ul show.bind="current.visible" style="list-style-type: none;">
	<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 {bindable} from 'aurelia-framework';

	export class TreeNode {

	@bindable current = null;

	}