This component can render a hierarchical list from a given model which is a tree of objects. It also supports user interactions to control the view (e.g. collapsing/expanding nodes) and fires events for all user interactions detected on the list. Each list item can have different states where each if these pre-defined states influences both the visual representation as well as the user interactions and events triggered. That said, the component is an EventEmitter using the Ember.Evented mixin. The treelist component uses local storage capabilities to preserve the collapse/expand state for a given instance across page views and sessions.
== Node Model ==
A tree node is represented with the following properties:
```lang=js
{
id: "unique identifier of the node",
html: "html content of the list item",
className: "css class names",
collapsed: true|false,
selected: true|false,
virtual: true|false,
children: [ /* list of node objects */ ],
}
```
NOTE: Do we even need the ability to provide custom templates to be used for rendering a list item? Think of a mailbox list showing badges with the unread messages count.
== List Properties / Constructor Arguments ==
TBD.
== Node States ==
* Default
* Selected
* Collapsed
* Virtual - //not selectable, does not fire click events//
== Events triggered ==
* click
* select
* collapse
* expand
== HTML representation ==
The DOM representation shall use nested `<ul>` and `<li>` elements which comply with the [[ http://www.w3.org/WAI/intro/aria | WAI ARIA ]] standards to provide the necessary information to assistive technologies. This means the addition of proper `role`, `aria-expanded`, `aria-selected` etc. attributes.