在 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');
 }
});

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

这是怎么回事？ Ember 版本？

更新

我很疑惑，因为这两个组件是一样的：

{{#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 为 wrapper 的元素。

this.$('#wrapper') 会在组件中找到一个 id 为 wrapper 的元素。

如果您定义的组件有可能在页面中多次出现，那么您不应该使用任何一种。编辑适当的模板，使wrapper 是一个类，而不是一个id。然后使用：

this.$('.wrapper')

Answer 3

由于您本质上只是切换一个类，因此更“Ember”的做法是在您的 wrapper 上设置一个条件类并在您的组件上切换一个属性：

从“ember”导入 Ember；

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

 click: function() {
  this.toggleProperty('classToggle');
 }
});

然后，在你的 DOM 元素上你可以有一个条件类：

<div id="wrapper" class="{{if toggleClass "toggled"}}">...</div>

或者，如果您使用的是旧版本的 Ember：

<div id="wrapper" {{bind-attr class="toggleClass:toggled"}}>...</div>

这更易于重用，因为您的组件不依赖 DOM 元素（如果您想重用该组件，这可能会变得混乱）。