CODEWITHSUNDEEP
ember.js
Marc Hughes
Marc Hughes

Reputation: 5858

Using Ember.js, how do I run some JS after a view is rendered?

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.

Upvotes: 43

Views: 17994

Answers (5)

NullVoxPopuli
NullVoxPopuli

Reputation: 65103

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

Upvotes: 1

XYZ
XYZ

Reputation: 27397

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,

  1. The component's element has been both created and inserted into the DOM.
  2. 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

Upvotes: 1

Jyoti
Jyoti

Reputation: 94

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
    });
}

Upvotes: 3

sergserg
sergserg

Reputation: 22234

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();
  }

});

Upvotes: 0

Roy Daniels
Roy Daniels

Reputation: 6309

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

Upvotes: 64

Related Questions