Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Monday, August 24, 2015

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.

Other Related Post:


No comments:

Post a Comment