Aurelia Bootstrap Tree

tree-node.css

.treeview .list-group-item {
  cursor: pointer;
}

.treeview span.indent {
  margin-left: 10px;
  margin-right: 10px;
}

.treeview span.icon {
  width: 12px;
  margin-right: 5px;
}

.treeview .node-disabled {
  color: silver;
  cursor: not-allowed;
}

tree-node.html

<template>
	<require from="./tree-node.css"></require>
	<li if.bind="visible" class="list-group-item treeview ${selectedNode == data?'active':''}" click.delegate="selectedNode = data">
		<span class="indent" repeat.for="i of level"></span>
		<span if.bind="data.children" class="icon glyphicon ${childrenVisible?'glyphicon-triangle-bottom':'glyphicon-triangle-right'}" click.delegate="toggleExpand()"></span>
		<span if.bind="!data.children" class="icon glyphicon"></span>
		 ${data.name}<span if.bind="!childrenVisible && itemCount != 0" class="badge" click.delegate="toggleExpand()">${itemCount}</span>
	</li>
	<tree-node if.bind="visible" repeat.for="node of data.children" data.bind="node" level.bind="level + 1" visible.bind="childrenVisible" max-level.bind="maxLevel" selected-node.bind="selectedNode"></tree-node>
</template>

tree-node.js

import {computedFrom, bindable, bindingMode, containerless} from 'aurelia-framework';

@containerless
export class treeNode {
	@bindable data;
	@bindable level;
	@bindable ({attribute: 'selected-node', defaultBindingMode: bindingMode.twoWay}) selectedNode;
	@bindable ({attribute: 'visible', defaultBindingMode: bindingMode.twoWay}) visible = true;
	@bindable maxLevel = 2;
	childrenVisible = false;

	@computedFrom('data')
	get itemCount() {
		return this.countNodes(this.data);
	}

	attached() {
		this.childrenVisible = this.level < this.maxLevel;
	}

	countNodes(node_item) {
		let count = 0;
		if(node_item.children !== undefined)
			node_item.children.forEach( (node_child) => count += this.countNodes(node_child) + 1);

		return count;
	}

	visibleChanged(newValue) {
		if(newValue = false) {
			this.childrenVisible = false;
		}
	}

	toggleExpand() {
		this.childrenVisible = !this.childrenVisible;
	}
}

Hi, I already did it. It was easier than I thought. Though I am still learning aurelia, so I am going a bit slow.

Best regards, and thanks for the excellent component.

Cristián

Do you mind creating a full demo as I don't seem to be able to get this to work.

Thanks

Not to worry, have just got it to work.

Thanks