Ember Component句柄jQuery事件处理程序

Question

In an Ember app Component, what is the best hook within which to handle jQuery event handlers ? I want to handle a keyUp event on an input element.

Answer 1

didInsertElement would be the best place to do anything jquery or dom related operation.

didInsertElement() is also a good place to attach event listeners. This is particularly useful for custom events or other browser events which do not have a built-in event handler.

https://guides.emberjs.com/v3.0.0/components/the-component-lifecycle/#toc_integrating-with-third-party-libraries-with-code-didinsertelement-code

Edit

We do not need $(document).ready() since document would have already been loaded by that time. You can access the dom element globally or locally.

You can access globally by using Ember.$() which is a similar to normal query which you can use to select any element on the page. Even from another component.

The better (preferred) approach is to access locally using this.$() which is scoped to component elements only.

For example:

<h1 class="title">Heading 1</h1>
{{your-component}}

# your-component.hbs
<div> <h2>Component Heading 2</h2></div>

From above example, you can access both and tags inside didInsertElement globally by using Ember.$('h1') and Ember.$('h2')

However if you do this.$('h1') , it will return null as your component template does not have h1 tag and the exiting h1 tag is outside of your component.

In nutshell, Ember.$() acts like regular $() and this.$() act like Ember.$('your component root element').find()