How to use Ember.js, how do I start JS after rendering a view?

Question

How to run a function after Ember View is inserted into the DOM?

Here is my use case: I would like to use jQuery UI sortable to sort.

Answer 1

You need to override didInsertElement because it is "Called when a view element has been inserted into the DOM. Override this function for any setting that requires an element in the body of the document."

Inside the didInsertElement you can use this.$() To get the jQuery object for the view element.

Link: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

Answer 2

You can also use the afterRender method

 didInsertElement: function () { Ember.run.scheduleOnce('afterRender', this, function () { //Put your code here what you want to do after render of a view }); } 

Answer 3

You need to run whatever you want in the didInsertElement in your view:

 MyEmberApp.PostsIndexView = Ember.View.extend({ didInsertElement: function(){ // 'this' refers to the view template element. this.$('table.has-datatable').DataTable(); } }); 

Answer 4

Ember 2.x: browsing is out of date, use component instead

You need to understand the component life cycle in order to know when certain things happen.

Because components are rendered, redisplayed, and permanently deleted, Ember provides lifecycle bindings that let you run code at a specific time in the component resource.

https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/

As a rule, didInsertElement is a great place to integrate with third-party libraries.

This hook guarantees two (2) things,

• The component element was created and inserted into the DOM.
• The component element is accessible through the $() component.

You need JavaScript to execute whenever attributes change

Run the code inside didRender .

Read the above life cycle document again for more information.