为何Ember组件中用this.$('#ember3705')获取根元素返回0个结果？

场景还原 #

DOM结构 #

<div id="ember3705" class="ember-view">
  <div id='childelement'></div>
</div>

在组件的component.js中，待组件渲染完成后执行this.$('#ember3705')，返回结果如下：

context: div#ember3705.ember-view
length: 0
prevObject: jQuery.fn.init
0: div#ember3705.ember-view
context: div#ember3705.ember-view
length: 1
[[Prototype]]: Object
selector: "#ember3705"

但执行this.$()却能得到预期结果：

0: div#ember3705.ember-view
context: div#ember3705.ember-view
length: 1

原因说明 #

这是Ember结合jQuery的特性导致的：

• this.$()在Ember组件中直接指向当前组件的根DOM元素，也就是示例中的div#ember3705.ember-view。
• 调用this.$(selector)时，Ember会把组件的根元素作为jQuery查找的上下文，只会在根元素的子元素范围内匹配选择器。而你要找的#ember3705本身就是根元素，它不属于自己的子元素，所以查找结果为空。

解决方案 #

如果要获取组件的根元素，直接用this.$()即可；如果非要通过选择器获取，也可以用全局的$('#ember3705')，但不推荐——因为Ember的组件id是动态生成的，硬编码id会导致代码在组件重新渲染或多实例场景下失效。

内容的提问来源于stack exchange，提问作者Allan