How to use jsTree plugin within Ember

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 component can add observers        //and computed properties on it    }});