Ember 组件处理 jQuery 事件处理程序答案

【问题标题】：Ember Component handle jQuery event handlersEmber 组件处理 jQuery 事件处理程序
【发布时间】：2018-04-03 18:14:11
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

编辑

我们不需要$(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()

【讨论】：

Thx...处理程序是否必须写入 $(document).ready() 或者由钩子保证...并且 $("#id") 会给我DOM 元素？
太棒了..感谢您的详细回复！
也许我错过了一些东西，但我不明白为什么需要通过 jQuery 注册事件处理程序。 Component.exend({ keyUp() { ... } }) 似乎很好，而且更容易，因为您不必处理 runloop。