How to use jsTree plugin within Ember, Example
How to use jsTree plugin within Ember:
JsTree plugin within Ember:
Today we want to make an example of JsTree .I have used jsTree plugin to render large number of tree node in my product. in this post we give a code for use of JsTree view. Now I'm in the process of moving to Ember, and require to manipulate jsTree plugin within Ember.I wrote a Ember component to render my folder structure using jsTree. My Component:
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 every action done on the tree, jsTree triggers an event respective to the event.
I used to listen to the events and do essentially action if required.
generally jsTree updates the DOM(Document Object Model) and triggers the event.
But in Ember we will not update the DOM(Document Object Model) ,instead we require to change the underlying MODEL and by two approach data-binding the DOM(Document Object Model) is changed by Ember.
It is nice blog Thank you provide important information and I am searching for the same information to save my time AngularJS Online Course
ReplyDelete