Ember Component处理jQuery事件处理程序

时间:2018-04-03 18:14:11

标签: javascript jquery ember.js

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

1 个答案:

答案 0 :(得分:3)

didInsertElement将是执行jquerydom相关操作的最佳位置。

  

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> 仅限于组件元素。

例如:

didInsertElement

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

全局访问this.$('h1')内的全部和标记

但是,如果您执行null,它将返回Ember.$(),因为您的组件模板没有h1标记,并且退出的h1标记位于您的组件之外。

简而言之,$()的行为与常规this.$()Ember.$('your component root element').find()的行为类似 try { something(); } catch (Exception e) { } finally { System.out.println(x); }