https://github.com/multimeric/jstreebind

A jQuery plugin that allows the use of data binding frameworks (Angular, Ember, Knockout etc.) with the jsTree UI component
https://github.com/multimeric/jstreebind

Last synced: 8 months ago
JSON representation

A jQuery plugin that allows the use of data binding frameworks (Angular, Ember, Knockout etc.) with the jsTree UI component

• Host: GitHub
• URL: https://github.com/multimeric/jstreebind
• Owner: multimeric
• License: mit
• Created: 2015-01-26T10:22:31.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2016-01-29T13:27:26.000Z (about 10 years ago)
• Last Synced: 2025-03-19T16:40:31.671Z (about 1 year ago)
• Language: JavaScript
• Size: 134 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# jsTree Bind

A jQuery plugin that allows the use of data binding frameworks (Angular, Ember, Knockout etc.) with the jsTree UI component.

## Rationale

jsTree is a fantastic plugin, but it's a bit behind the times. Unlike when it was first designed, web apps are now based on data binding rather than raw DOM manipulation. However using jsTree with a databinding framework has two main problems:

* jsTree is designed for static data; data that never changes once it's been set.

* You have to mangle your data into [jsTree's specific JSON format](http://www.jstree.com/docs/json/) in order for it to be displayed

My solution to these problems is to use the native capability of every framework; to bind data to the DOM. jsTree Bind uses the DOM as a template from which to create nodes, allowing you to have data in any structure, structure it in any way, but still present it in a tree format using jsTree

## Installation

Just run `npm install js-tree-bind` or `git clone https://github.com/TMiguelT/jsTreeBind` to get a copy of the

repository, then copy either `jsTreeBind.js` or `jsTreeBind.min.js` somewhere into your project.

## Usage

To use jsTree Bind, all you need to do is call `$("#js-tree").jsTreeBind("#tree-template");`

The first element (`#js-tree` in this case) is the element that will *receive* the new tree.

It's the element that will actually be shown.

The second element, `#tree-template`, is the DOM element to be used as the template for the tree.

Directly inside the `#tree-template` element should be one or more HTML elements, which will serve as the root nodes for

the tree. These elements, and any child nodes nested further in the tree are used to generate jsTree nodes using the

following rules:

* Text directly inside a node will be merged into that the jsTree node's text

* Nested elements will be used to generate child nodes

* As in the [jsTree docs](http://www.jstree.com/docs/html/), the `data-jstree` attribute can be used on any element to

to provide a json object to use as the node's data

* Any other `data-*` attributes can be used on the HTML elements, which work as you'd expect (e.g. `data-icon` sets the

node's icon class or image URL, `data-disabled` disables the node etc.)

Read on for an example!

## Example

```html



    

    


        People

        


            

            {{ person.name }}

            

            


                

                
{{tag}}

            


            


                

                
{{friend.name}}

                

            


            


                

                
{{person.age}}

            


            


                

                
{{person.gender}}

            

        

    





```


![Example](http://i.imgur.com/iAgTHX9.png)

For more detail on this example, including the Angular $scope data, and sample usage for another framework (VueJS),

have a look in the /demo directory of the repository.