在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')选择一个元素，另一个使用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')

Answer 3

因为你实际上只是在切换一个类，所以更多的“Ember”方法就是在你的wrapper上设置一个条件类并在组件上切换一个属性：

从'余烬'进口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元素（如果您想要重用此组件，则可能会变得混乱）。