Ember 组件句柄 jQuery 事件处理程序

Question

在 Ember 应用程序组件中，处理 jQuery 事件处理程序的最佳挂钩是什么？我想处理输入元素上的 keyUp 事件。

Answer 1

didInsertElement 将是执行任何 jquery 或 dom 相关操作的最佳位置。

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

编辑

我们不需要 $(document).ready()，因为那时文档已经加载完毕。您可以全局或本地访问 dom 元素。

您可以使用 Ember.$() 进行全局访问，这类似于您可以对页面上的任何元素使用 select 的普通查询。甚至来自另一个组件。

更好（首选）的方法是使用 this.$() 在本地访问，它的范围仅限于组件元素。

例如：

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

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

从上面的示例中，您可以使用 Ember.$('h1') 和 Ember.$('h2')

全局访问 didInsertElement 中的和标签

但是，如果您这样做 this.$('h1')，它将 return null 因为您的组件模板没有 h1 标签，并且现有的 h1 标签在您的组件之外。

简而言之，Ember.$() 表现得像常规 $()，而 this.$() 表现得像 Ember.$('your component root element').find()

Ember 组件句柄 jQuery 事件处理程序

Ember Component handle jQuery event handlers

javascript

jquery

ember.js