在Ember中通过ID获取元素

我正在运行两个应用程序。一个具有以下组件：在Ember中通过ID获取元素

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版本？

UPDATE

我很纳闷，因为这两个部件是相同的：

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

它们是用来隐藏侧边栏DIV两个汉堡包菜单和#wrapper是外部元素。

因为在这两种情况下，#wrapper都是外部元素，不应该只是第一个案例工作@Gaurav和@Kevin Jhangiani？

来源

2015-11-16 Marcelo Borges

是的，'Ember。$'应该在两种情况下都有效。如果元素不是孩子，'this。$'不应该工作。 –

Ember.$('#wrapper')将在页面中使用包装的ID查找元素。

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

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

this.$('.wrapper')

来源

2015-11-16 19:25:46 Gaurav

既然你基本上只需切换的一类，这样做是有你的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>

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

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

这是一个有点因为您的组件不依赖于DOM元素（如果您想重复使用此组件，可能会变得麻烦），因此更具可重用性。

来源

2015-11-16 22:33:48 sbatson5

谢谢@ sbatson5，你的回答对我来说效果不错！ –

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

Ember.$()

作用于整个文档，即，您可以访问页面上的任何元素。

相反，

this.$()

的作用范围是电流分量或视图，并且因此可以是仅访问DOM元素的孩子。

通常，您应该使用this.$，因为它会更高性能（因为搜索空间只是子元素）。 Ember.$应该保留在绝对需要访问当前上下文之外的元素的时候。

来源

2015-11-16 22:51:49

在Ember中通过ID获取元素

回答

相关问题