jsTree plugin Inside Ember

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.

<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:{

} 
});

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 ?