- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
Third-Party Libraries with didInsertElement
You can initialize and attach the 3rd party libraries into the DOM element by using this didInsertElement hook. This can be called when the component's element has been created and inserted into DOM and accessible by using the s() method.
Syntax
import Ember from 'ember'; export default Ember.Component.extend ({ ... didInsertElement() { //code here }, ... })
Example
The example given below describes the use of didInsertElement hook when integrating with third-party library. Create a component with the name post-action, which will get define under app/components/.
Open the post-action.js file and add the following code −
import Ember from 'ember'; var inject = Ember.inject; export default Ember.Component.extend ({ age: 'Tutorialspoint', actions: { pressed: function () { this.$("#test").fadeIn("slow"); } }, didInsertElement: function () { Ember.run.scheduleOnce('afterRender', this, function () { this.$("#test").fadeOut("slow"); }); } });
Now open the component template file post-action.hbs with the following code −
<div id = "test">This is {{age}}</div> <button {{action "pressed"}}> Press Me </button> {{yield}}
Open the index.hbs file and add the following code −
{{post-action}} {{outlet}}
Output
Run the ember server; you will receive the following output −
When you click the button, it will specify the fadeIn and fadeOut effect on the text −