javascript - How to use jsTree plugin within Ember -

javascript - How to use jsTree plugin within Ember -

i have used jstree plugin render big number of tree node in product.

now in process of moving ember, , need implement jstree plugin within ember.

i wrote ember component render folder construction 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 component each action done on tree, jstree triggers event respective event.

i used hear events , necessary action if required.

basically jstree updates dom , triggers event.

but in ember not update dom ,instead need update underlying model , 2 way data-binding dom updated ember.

here going against ember conventions.

am going in right direction?

is there other way utilize jstree ember?

or there jstree component available in ember render big number of tree nodes features context menu, drag & drop, search, unique plugin, checkbox, lazy loading, updating nodes?

answers questions.

am going in right direction?. can modularize code better. is there other way utilize jstree ember?. don't know have in mind, have wrap jquery interface in something. is there ember extension jstree?. take @ ember-cli-jstree or ember-cli-tree.

detailed response

we utilize ember in our production app had extend jquery plugins , i'll outline way did it.

there 3 stages in life cycle of plugin, initialization options, user interactions triggering events , event handler manipulating states. objective create layer of abstraction on these stages next ember conventions. abstraction must not create plugin documentation unusable.

app.plugincomponent = em.component.extend({ /***** initialization *****/ op1: null, //default value op2: true, listofalloptions: ['op1', 'op2'], setupoptions: function() { //setup observers options in `listofalloptions` }.on('init'), options: function() { //get keys `listofalloptions` , values current object //and translate them //to key value pairs used initialize plugin }.property(), /***** event handler setup *****/ pluginevents: ['show', 'hide', 'change'], onshow: function() { //callback `show` event }, setupevents: function() { //get event names `pluginevents` //and setup callbacks //we utilize `'on' + em.string.capitalize(eventname)` //as convention callback names }.on('init'), /***** initialization *****/ onhide: function() { //change info //so users of component can add together observers //and computed properties on } });

javascript jquery ember.js jstree