I have used jsTree plugin to render large number of tree node in my product.

Now I am in the process of moving to Ember, and need to implement jsTree plugin within Ember.

I wrote a Ember ponent to render my folder structure using jsTree.

My Component:

<script type="text/x-handlebars" data-template-name="ponents/temp-tree">
    <div id="treediv">Tree Data</div>
</script>

App.TempTreeComponent = Ember.Component.extend({
    didInsertElement: function(){
        var self = this;
        self.$().jstree({
            'plugins':["contextmenu", "dnd"],
            'core' : {
                'data' : [
                    'Simple root node',
                    { 
                        'text' : 'Root node 2',
                        'state' : {
                            'opened' : true,
                            'selected' : true
                        },
                        'children' : [
                            {'text' : 'Child 1'},
                            'Child 2'
                        ]
                    } 
                ], 
                'check_callback': true
            }
        })
        .on('rename_node.jstree', function(e, data) {
            alert('rename');
        })
        .on('delete_node.jstree', function(e, data) {
            alert('delete');
        });
    }, 
    actions: {} 
});

JSBIN Demo

In my ponent for each action done on the tree, jsTree triggers an event respective to the event.

I used to listen to the events and do necessary action if required.

Basically jsTree updates the DOM and triggers the event.

But in Ember we will not update the DOM ,instead we need to update the underlying MODEL and by two way data-binding the DOM is updated by Ember.

Here I am going against the Ember Conventions.

Am I going in the right direction?

Is there any other way to use jsTree with Ember?

Or is there any jsTree like ponent available in Ember to render large number of tree nodes with all features like context menu, drag & drop, search, unique plugin, checkbox, lazy loading, updating nodes?

I have used jsTree plugin to render large number of tree node in my product.

Now I am in the process of moving to Ember, and need to implement jsTree plugin within Ember.

I wrote a Ember ponent to render my folder structure using jsTree.

My Component:

<script type="text/x-handlebars" data-template-name="ponents/temp-tree">
    <div id="treediv">Tree Data</div>
</script>

App.TempTreeComponent = Ember.Component.extend({
    didInsertElement: function(){
        var self = this;
        self.$().jstree({
            'plugins':["contextmenu", "dnd"],
            'core' : {
                'data' : [
                    'Simple root node',
                    { 
                        'text' : 'Root node 2',
                        'state' : {
                            'opened' : true,
                            'selected' : true
                        },
                        'children' : [
                            {'text' : 'Child 1'},
                            'Child 2'
                        ]
                    } 
                ], 
                'check_callback': true
            }
        })
        .on('rename_node.jstree', function(e, data) {
            alert('rename');
        })
        .on('delete_node.jstree', function(e, data) {
            alert('delete');
        });
    }, 
    actions: {} 
});

JSBIN Demo

In my ponent for each action done on the tree, jsTree triggers an event respective to the event.

I used to listen to the events and do necessary action if required.

Basically jsTree updates the DOM and triggers the event.

But in Ember we will not update the DOM ,instead we need to update the underlying MODEL and by two way data-binding the DOM is updated by Ember.

Here I am going against the Ember Conventions.

Am I going in the right direction?

Is there any other way to use jsTree with Ember?

Or is there any jsTree like ponent available in Ember to render large number of tree nodes with all features like context menu, drag & drop, search, unique plugin, checkbox, lazy loading, updating nodes?

• javascript
• jquery
• ember.js
• jstree

• How did you continue with this? I'm including jsTree in my Ember code at the moment. Haven't tried to respect Ember's conventions yet. – Michael Commented Jan 31, 2015 at 21:50
• 2 Btw., calling self.$().jstree(); didn't work for me, I had to use Ember.run.next(function() { self.$().jstree();});. Maybe because I use nested ponents (each node is a ponent). – Michael Commented Jan 31, 2015 at 21:51

1 Answer 1

Answers to your questions.

1. Am I going in the right direction?. You can modularize your code better.
2. Is there any other way to use jsTree with Ember?. I don't know what you have in mind, but you have to wrap jQuery interface in something.
3. Is there any Ember extension like jsTree?. Take a look at ember-cli-jstree or ember-cli-tree.

Detailed response

We use Ember in our production app where we had to extend some jQuery plugins and I'll outline the way we did it.

There are three stages in the life cycle of a plugin, initialization with some options, user interactions triggering events and event handler manipulating states. The objective is to create a layer of abstraction over these stages following Ember conventions. The abstraction must not make the plugin documentation unusable.

App.PluginComponent = Em.Component.extend({
    /***** initialization *****/
    op1: null,
    //default value
    op2: true,
    listOfAllOptions: ['op1', 'op2'],
    setupOptions: function() {
        //setup observers for options in `listOfAllOptions`
    }.on('init'),
    options: function() {
        //get keys from `listOfAllOptions` and values from current object
        //and translate them
        //to the key value pairs as used to initialize the plugin
    }.property(),

    /***** event handler setup *****/
    pluginEvents: ['show', 'hide', 'change'],
    onShow: function() {
        //callback for `show` event
    },
    setupEvents: function() {
        //get event names from `pluginEvents`
        //and setup callbacks
        //we use `'on' + Em.String.capitalize(eventName)`
        //as a convention for callback names
    }.on('init'),

    /***** initialization *****/
    onHide: function() {
        //change the data
        //so that users of this ponent can add observers
        //and puted properties on it
    }
});