Check out myAngular article series with live demos and Facebook group Angular - Advanced Topics

Aurelia Treeview on GitHub

Torgeir "Tor" Helgevold
- JavaScript Developer and Blogger
Published: Sat Apr 11 2015

I have added a cleaned up version of my Aurelia treeview project to Github and here is a quick tutorial showing you how to use it.

The code for the treeview can be downloaded from Github

After downloading the dependencies all you have to do is add it to your page. In this example I have decided to wrap the treeview in a custom Aurelia component called test-treeview. The html and JavaScript files are shown below. You can specify your own folder structure, but this example assumes that the treeview files are stored in a folder named treeview.

test-treeview.html

<template> <require from="./treeview/tree-node"></require> <tree-node repeat.for="node of locations" current.bind="node"></tree-node> </template>

test-treeview.js

import {NodeModel} from './treeview/node-model'; export class TestTreeview{ 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.locations = [texas,newYork,oregon,california]; } }

If you liked this article, share it with your friends on social media:

We also have a new Facebook group about advanced Angular topics.

I invite you to follow me on twitter