在Ember中按ID获取元素

Question

我正在运行两个ember应用程序.一个有以下组件:

import Ember from 'ember';

export default Ember.Component.extend({
 tagName: 'a',

 click: function() {
  Ember.$('#wrapper').toggleClass('toggled');
 }
});

而另一个,有这个:

import Ember from 'ember';

export default Ember.Component.extend({
 tagName: 'a',

 click: function() {
  this.$('#wrapper').toggleClass('toggled');
 }
});

我在这里无法理解的是为什么在一个应用程序中我使用ID选择元素,而在另一个应用程序Ember.$('#wrapper')中使用this.$('#wrapper').

这是关于什么的？灰烬版？

UPDATE

我很困惑,因为两个组件是相同的:

{{#show-menu}}
    <i class="fa fa-bars"></i>`
{{/show-menu}}`

它们都是用于隐藏侧边栏div的汉堡菜单,而且#wrapper是外部元素.

既然在这两种情况下#wrapper都是外在元素,那不应该只是第一个案例工作@Gaurav和@Kevin Jhangiani？

Answer 1

区别在于jquery选择器的上下文.

Ember.$()

范围限定为整个文档,即您可以访问页面上的任何元素.

相反,

this.$()

范围限定为当前组件或视图,因此您只能访问作为子项的dom元素.

通常,您应该使用this.$它,因为它将更高性能(因为搜索空间只是子元素). Ember.$当你绝对需要访问当前上下文之外的元素时,应该保留这些时间.

Answer 2

Ember.$('#wrapper') 将在页面中找到包含id的元素.

this.$('#wrapper') 将在包含id的组件中找到一个元素.

如果您定义的组件有可能在页面中出现多次,那么您应该两者都不使用.编辑相应的模板,使其wrapper成为一个类,而不是一个id.然后使用:

this.$('.wrapper')