`Javascript
{
'id': 'node15',
'text': 'Node title',
'state': { 'selected': true },
'a_attr': { 'class': 'hint--bottom', 'data-hint': 'Some hint goes here' }
}
`

This will get rendered in HTML as

`HTML
Node title
`

Event Handling

The addon listens for events from jstree and sends them back to you using actions bound
to the Handlebars template. Simply set the property to the string name of the action
in your controller.

`Handlebars
{{ember-jstree
[...]
eventDidChange=(action "handleJstreeEventDidChange")
treeObject=jstreeObject
}}
`

$3

The following events have basic support included. More are on the way.

| jsTree Event | Ember Action |
| ----------------------- | ----------------------- |
| after_open.jstree | eventDidOpen |
| after_close.jstree | eventDidClose |
| changed.jstree | eventDidChange |
| dehover_node.jstree | eventDidDehoverNode |
| deselect_node.jstree | eventDidDeselectNode |
| hover_node.jstree | eventDidHoverNode |
| init.jstree | eventDidInit |
| loading.jstree | eventIsLoading |
| loaded.jstree | eventDidLoad |
| ready.jstree | eventDidBecomeReady |
| redraw.jstree | eventDidRedraw |
| show_node.jstree | eventDidShowNode |
| select_node.jstree | eventDidSelectNode |
| (destroyed - no event) | eventDidDestroy |
| move_node.jstree | eventDidMoveNode |
| disable_checkbox.jstree | eventDidDisableCheckbox |
| enable_checkbox.jstree | eventDidEnableCheckbox |
| check_node.jstree | eventDidCheckNode |
| uncheck_node.jstree | eventDidUncheckNode |
| check_all.jstree | eventDidCheckAll |
| uncheck_all.jstree | eventDidUncheckAll |

Note: In the meantime, you can add event listeners yourself by calling them on a mapped treeObject property.

`Javascript
_handleOpenNode: function() {
var treeObject = this.get('jstreeObject');
treeObject.on('open_node.jstree', function(e, data) {
console.info('A node was opened.');
console.log(data);
}.bind(this));
}
`

$3

Selected nodes are always available through the selectedNodes property

Plugins

Plugins for your tree should be specified by a plugins string property. Multiple plugins should be
separated with commas.

`Handlebars
{{ember-jstree
data=data
plugins=plugins
}}
`

The following plugins are currently supported. More on the way!

* Checkbox
* Contextmenu
* Search
* Sort
* State
* Types
* Wholerow
* Drag and Drop

$3

Send a hash containing the jsTree options through to the addon through the Options key.

In your controller:

`Javascript
jstreeStateOptionHash: {
'key': 'ember-cli-jstree-dummy'
},
plugins: 'state'
`

In Handlebars:

`Handlebars
{{ember-jstree
[...]
plugins=plugins
stateOptions=jstreeStateOptionHash
}}
`

The sort plugin accepts a sort function instead of an options hash.

`Handlebars
{{ember-jstree
[...]
plugins=plugins
sort=sortFunction
}}
`

$3

Send in the following properties>) to control how the tree is refreshed when you change the data

* skipLoading
* forgetState

Both default to false if nothing is passed in

Sending actions to jsTree

The addon component will try to register an actionReceiver (see view helper example) to a property in
your controller if you define it. You can then send actions through that bound property:

`Javascript
this.get('jstreeActionReceiver').send('redraw');
`

Note: Action names in Ember are camelized (e.g.: get_node() in jsTree is mapped to getNode() in Ember).

If the corresponding jsTree method has a return value, the addon will send an action with the name corresponding
to supported actions in the table below. Because the addon actually calls these jsTree events, if any events
occur because of an action, they will be sent as actions (see Event Handling above).

$3

| jsTree Action | Ember Action | Return Action |
| ---------------- | -------------- | -------------------- |
| copy_node | copyNode | |
| close_all | closeAll | |
| close_node | closeNode | |
| create_node | createNode | actionCreateNode |
| delete_node | deleteNode | actionDeleteNode |
| deselect_all | deselectAll | |
| deselect_node | deselectNode | |
| destroy | destroy | |
| get_children_dom | getChildrenDom | actionGetChildrenDom |
| get_container | getContainer | actionGetContainer |
| get_node | getNode | actionGetNode |
| get_parent | getParent | actionGetParent |
| get_path | getPath | actionGetPath |
| get_text | getText | actionGetText |
| last_error | lastError | actionLastError |
| load_all | loadAll | actionLoadAll |
| load_node | loadNode | actionLoadNode |
| move_node | moveNode | |
| open_all | openAll | |
| open_node | openNode | |
| redraw | redraw | |
| rename_node | renameNode | actionRenameNode |
| select_all | selectAll | |
| select_node | selectNode | |
| toggle_node | toggleNode | |

$3

In your Handlebars component, map the return action (as above, most of which follow the pattern action):

`Handlebars
{{ember-jstree
[...]
actionGetNode=(action "handleJstreeGetNode")
}}
`

Any params that jsTree returns will be given in the order specified by its API.

`Javascript
actionGetNode: function (node) {
this.set('someValue', node);
}
`

Demo

http://ritesh83.github.io/ember-cli-jstree/#/static

Both dynamic (AJAX loaded) and static examples are in the dummy demo.

* Clone this repo: git clone
* Install packages: yarn
* Run ember serve`
* Visit the sample app at http://localhost:4200.

Guides

http://ridhwana.com/articles/2017/05/28/introduction-to-ember-cli-js-tree.html