Where and how I can initialise jQuery UI Components while using Ember

Design
1

I am in the process of transforming my product completely build using jQuery into Ember.JS.

I am new to ember and by constant learning the initial layout of my product is ready using Ember concepts like Routes, Controller, View.

I have many views each backed by a Route, which lists all the items corresponding to its model.

Now I need to do some actions on the list items using jQuery UI menu component.

Each actions I should load the data inside a dialog. ( Need to load inside jQuery UI Dialog Component.

Inside the dialog data I need to initialise jQuery Autocomplete component.

All the jQuery UI Components I need to use in my product.

I am not clear how and where to initialise the jQuery UI components.

At last is there an Ember Tree Components which can render into tree view and handle all drag-drop features within it.

Thanks

Jeevi

2

You can see @lukemelia’s Luke Melia » Using Ember.js with jQuery UI article for an example of how to integrate jQuery UI and Ember.js.

3

@locks I have tried it in my build, but I could not get the jQuery Dialog working. I need to call many dialogs and load data inside it. Is there any working example on how to load the dialog then destroy it completely and load another dialog.

4

I am not aware of one, since I don’t use jQuery UI myself :\

5

I use some jQuery libs in my Ember app. When I have to do some stuff with them, I create a specific view/component and I insert the jQuery functionality in the didInsertElement method this way:

didInsertElement: function () {
  this._super();

  Ember.run.scheduleOnce('afterRender', this, function () {
    // some jQuery UI stuff
  });
}
```

I hope it helps :smiley:
6

^ Yah, just like that, but use .on(‘didInsertElement’) instead of playing with the ember run loop and supers, unless you absolutely have to.

1 Like
7

@Gorzas Thanks for your reply and it helped me a lot. I used a Component and added my initialisation and destroy of the jQuery component in disInsertElement.

didInsertElement: function(){
    $("#dialogdiv").dialog();
    $("#dialogdiv").bind('dialogclose', function(){
	    $("dialogdiv").dialog('destroy');
    });
});

Also one more doubt regarding use of Ember Component.

If I have to use many Components in my application, I have to include all the components in my application.

Is there any other way to include the component when ever required and destroy it when its usage is over. I mean to say DYNAMIC Components include and destroy it.

8

Equally as important as initializing, you’ll want to be very proactive in tearing down the jQuery widget within the willDestroyElement hook to prevent nasty memory leaks and the component sticking around for the lifetime of your app.

3 Likes
9

@jasonmit Thanks for your reply. In my case I am in a route, and have a single component inside that route view.

Now I need to initialise my jQuery widgets (like Dialog) inside that Component and load some data inside the dialog. Then I need to close the dialog by completely destroying the dialog related events and bindings.

After that I will be in the same route and the Component is bound to the route. Now I need to again initialise another dialog inside the same Component.

When will willDestroyElement will be called after the Component is loaded inside my route.

Can I remove all my jQuery widget related bindings and destroy it over there.

Can I again initialise another dialog widget within the same Component without any memory leak.

10

You can call this.destroy() I think. willDestroyElement triggers when then element is removed for any reason (route transition is the most common, but you can listen to other events or make your own)

11

https://github.com/dockyard/reefpoints/blob/master/source/posts/2014-04-28-dont-override-init.md

12

I am not sure what you’re referring to here, can you add some more clarity.

willDestroyElement gets called when the component is going to be removed from the DOM. http://emberjs.com/api/classes/Ember.View.html#event_willDestroyElement

Yes, and that’s the perfect place to do it.

Yes

13

@jasonmit

willDestroyElement gets called when the component is going to be removed from the DOM. – Called when the element of the view is going to be destroyed. Override this function to do any teardown that requires an element, like removing event listeners.

In my case my view is not going to be destroyed. I will be in the same view and I need to load different jQuery Dialog Widget inside the same Component.

Now how can I destroy all the events and binding related to the dialog widget when it is closed to avoid memory leak.

14

Keep in mind that ‘didInsertElement’ only fires once, after the initial base template for the view has been inserted into the DOM, but not before the dynamic elements have been rendered. That’s why you need to use the run loop and the ‘afterRender’ queue to select content that gets rendered inside {{mustaches}} or with {{#helpers}}{{/helpers}}.

You only need to use this._super() if you’re inheriting from a parent view/component that has an existing ‘didInsertElement’ method.

15

Perhaps for some 3rd party libs, but certainly not for ember-specific stuff. If, so mega-bug somewhere. You shouldn’t be calling super anywhere, but listening to initialization instead.

16

I see what you’re saying regarding _super. Listening to the event is a much safer pattern, and simple to implement.

Regarding the 3rd party libs, in this case it doesn’t appear the run loop is necessary, but in many cases you’re dealing with content that is not yet rendered at the time the ‘didInsertElement’ event occurs. I just wanted to clarify that point, as it tripped me up early on with Ember.