How to use jsTree plugin within Ember

Question

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 component to render my folder structure using jsTree.

My Component:

<script type="text/x-handlebars" data-template-name="components/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 component 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 component 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?

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
Btw., calling self.$().jstree(); didn't work for me, I had to use Ember.run.next(function() { self.$().jstree();});. Maybe because I use nested components (each node is a component). — Michael

Ajinkya Ajinkya · Accepted Answer · 2015-08-31T11:55:37

Answers to your questions.

Am I going in the right direction?. You can modularize your code better.
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.
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 component can add observers
        //and computed properties on it
    }
});

How to use jsTree plugin within Ember

1 Answers