What is the best way to add external javascript code?

Question

I would like to add jQuery code to my page, which needs to be loaded after the page is displayed?

What is the best way to include in ember-cli?

Do I need to create a new custom js file and use app.import to import this js file?

Thank you very much.

Answer 1

Recommended

Usually you want to do this within Ember.View or Ember.Component . Both of them implement the didInsertElement hook, which can be used to access the DOM elements after which they were rendered.

Here is an example:

 export default Ember.View.extend({ didInsertElement: function() { // this.$() is a scoped selector to the current view this.$().yourJqueryFunction(); } } 

This is a recommended practice, as you can ensure that the DOM is present at that time. If you simply pat on the jQuery function after loading the js application, it is very possible that it is not yet on the screen, so it will not be called. It is also possible that you are not on a route where this jQuery code is used, and then you go to it. This will not work properly at the moment.

ember docs found here

Another way

You can delete your js file in the vendor/ folder and use the app.import API to import it into the vendor.js file at build time. The main disadvantage of this is that you do not have direct access to your ember applications or ES6 modules or other add-ons that your addon can add.