How do I run a function after an Ember View is inserted into the DOM?
Here's my use-case: I'd like to use jQuery UI sortable to allow sorting.
Add a comment
|
5 Answers
You need to override didInsertElement as it's "Called when the element of the view has been inserted into the DOM. Override this function to do any set up that requires an element in the document body."
Inside the didInsertElement callback, you can use this.$() to get a jQuery object for the view's element.
Reference: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js
7 Comments
Luke Melia
Within your override of didInsertElement, you can reference
this.$() to get a handle to the jquery wrapper for the DOM element.
Roy Daniels
Marc: You might find this article useful as well. It helped me back in the day when I had to get JUI and SC2 working. NOTE: Some of the api might have changed since this article was written so it might not be cut and paste code. http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/
Marc Hughes
Thanks a lot! That this answer plus those two comments really helped me figure this out. I'm impressed with the EmberJS community support so far.
Calvin
I'm glad I found this. Thanks @LukeMelia, I was wondering how to get a reference to the DOM element.
miguelcobain
I have a view in which I render an array of models in its template. I put a breakpoint on the didInserElement function and I can see that it fires before the list of elements is rendered. I need to execute some logic after each change. Is there any way to accomplish this?
|
You can also use afterRender method
didInsertElement: function () {
Ember.run.scheduleOnce('afterRender', this, function () {
//Put your code here what you want to do after render of a view
});
}
Comments
Ember 2.x: View is deprecated, use component instead
You have to understand the component's lifecycle to know when does certain things happen.
As components are rendered, re-rendered and finally removed, Ember provides lifecycle hooks that allow you to run code at specific times in a component's life.
https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/
Generally, didInsertElement is a great place to integrate with 3rd-party libraries.
This hook guarantees two (2) things,
- The component's element has been both created and inserted into the DOM.
- The component's element is accessible via the component's
$()method.
In you need JavaScript to run whenever the attributes change
Run your code inside didRender hook.
Once again, please read the lifecycle documentation above for more information
Comments
Starting with Ember 3.13, you can use components that inherit from Glimmer, and this example below shows what that could look like:
import Component from '@glimmer/component';
import { action } from '@ember/object';
/* global jQuery */
export default class MyOctaneComponent extends Component {
@action configureSorting(element) {
jQuery(element).sortable();
}
}
<div {{did-insert this.configureSorting}}>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
These view style components don't have lifecycle hooks directly, instead, you can use render-modifiers to attach a function. Unofficial introduction to modifiers can be found here
The benefit of this is that, it's clearer what the responsibilities of the template are and become.
Here is a runnable codesandbox if you want to play around with this: https://codesandbox.io/s/octane-starter-ftt8s
Comments
You need to fire whatever you want in the didInsertElement callback in your View:
MyEmberApp.PostsIndexView = Ember.View.extend({
didInsertElement: function(){
// 'this' refers to the view's template element.
this.$('table.has-datatable').DataTable();
}
});
1 Comment
SwarmIntelligence
If you call it like this, you need to add this._super() at the top.