Ember Component handle jQuery 事件处理程序

Question

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

Answer 1

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

didInsertElement() 也是附加事件侦听器的好地方。这对于自定义事件或其他没有内置事件处理程序的浏览器事件特别有用。

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.$()进行全局访问，这是一个类似于普通查询的查询，可用于选择页面上的任何元素。甚至来自另一个组件。

更好(首选)的方法是使用范围仅限于组件元素的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')，它将返回null，因为您的组件模板没有 h1 标签，并且现有的 h1 标签在您的组件之外。

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