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')选择另一个元素。

这是什么意思？灰烬版？

更新

我非常困惑，因为两个组成部分是相同的：

{{#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是一个类，而不是一个id。然后使用：

this.$('.wrapper')

Answer 3

由于您实际上只是在切换一个类，因此更多“Ember”方法是在.pdf上设置一个条件类并切换组件上的属性：

从'ember'导入Ember;

wrapper

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

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

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

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

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

由于您的组件不依赖于DOM元素（如果您想再次使用此组件，可能会变得混乱），这会更加可重用。

在Ember中按ID获取元素

3 个答案: