Getting element by ID in Ember

问题

I am running two ember applications. One has the following component:

import Ember from 'ember';

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

 click: function() {
  Ember.$('#wrapper').toggleClass('toggled');
 }
});

and the other one, has this one:

import Ember from 'ember';

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

 click: function() {
  this.$('#wrapper').toggleClass('toggled');
 }
});

What I can't understand here is why in one application I select an element by ID using Ember.$('#wrapper') and in the other using this.$('#wrapper').

What is this about? Ember version?

UPDATE

I'm very puzzled, since both components are the same:

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

They are both hamburger menus used to hide a sidebar div, and the #wrapper is an external element.

Since in both cases the #wrapper are external elements, shouldn't just the first case work @Gaurav and @Kevin Jhangiani?

回答1:

The difference is in the context of the jquery selector.

Ember.$()

is scoped to the entire document, ie, you can access any element on the page.

In contrast,

this.$()

is scoped to the current component or view, and thus you can only access dom elements that are children.

Generally, you should be using this.$ as it will be more performant (since the search space is only child elements). Ember.$ should be reserved for times when you absolutely need to access an element outside of the current context.

回答2:

Ember.$('#wrapper') will find an element in the page with the id of wrapper.

this.$('#wrapper') will find an elment within the component with the id of wrapper.

If there is any chance that the component you are defining will ever occur more than once in the page, then you should use neither. Edit the appropriate template so that wrapper is a class, not an id. Then use:

this.$('.wrapper')

回答3:

Since you are essentially just toggling a class, the more "Ember" way of doing this is having a conditional class on your wrapper and toggle a property on your component:

import Ember from 'ember';

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

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

Then, on your DOM element you can have a conditional class:

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

or, if you are using an older version of Ember:

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

This is a bit more reusable as your component doesn't rely on a DOM element (which can get messy if you want to reuse this component ever).

来源：https://stackoverflow.com/questions/33742647/getting-element-by-id-in-ember