aurelia-jstree
An Aurelia wrapper component for jsTree.
Install
Make sure to npm install jQuery and jsTree alongside this wrapper.
npm install jquery jstree aurelia-jstree --save
Aurelia CLI Support
If your Aurelia CLI build is based on RequireJS or SystemJS you can setup the plugin using the following dependency declaration:
..."dependencies":
Configuration
In your main.ts
you'll have to load jstree and register the plugin:
;; // <------------ MAKE SURE TO IMPORT JSTREE; // <----- IMPORT STYLES OR INCLUDE BY ANY OTHER MEANS (SCSS, direct include ...)
Usage
Once the plugin is installed and configured you can use the au-js-tree
custom component.
An example for a simple filebrowser is provided below:
The settings.core
should not contain the data
property. It should be provided
separately via the data binding
to ensure proper re-renders on prop changes.
When binding a function to either
selection-changed
ornode-moved
instead of a lambda expression, please note thatthis
inside your function is going to refer to the element vs your expected class instance. To avoid that bind with a proper context
Acknowledgement
Thanks goes to Dwayne Charrington for his Aurelia-TypeScript starter package https://github.com/Vheissu/aurelia-typescript-plugin