EmberのIDで要素を取得する

Question

私は2つの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')を使用しています。

これは何についてですか？ Emberのバージョン？

UPDATE

、両成分が同じであるので、私は、非常に困惑している：

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

彼らはサイドバーのdivを非表示にするために使用両方のハンバーガーメニューで、#wrapperは外部の要素であり、 。

#wrapperは外部要素なので、最初のケースでは@Gauravと@Kevin Jhangianiを使用しないでください。

Answer 1

Ember.$('#wrapper')は、ページにラッパーのIDを持つ要素を検出します。

this.$('#wrapper')は、idがwrapperのコンポーネント内でelmentを検出します。

定義しているコンポーネントがページ内で複数回出現する可能性がある場合は、どちらも使用しないでください。適切なテンプレートを編集して、wrapperがidでなくクラスになるようにします。次に使用：

this.$('.wrapper')

Answer 2

あなたは、本質的にちょうどクラスをトグルしているので、あなたのwrapperを条件クラスを持ち、コンポーネントのプロパティを切り替えているこれを行うには、より「エンバー」方法：

ember from 'ember'をインポートします。これは、ビットは

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

です：あなたはエンバーの古いバージョンを使用している場合は、

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

か：

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

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

次に、あなたのDOM要素に、あなたは条件クラスを持つことができますあなたのコンポーネントがDOM要素に依存しないので再利用可能です（このコンポーネントを今までに再利用したい場合は面倒です）。

Answer 3

違いは、jqueryセレクタのコンテキストにあります。

Ember.$() 

は、ドキュメント全体にスコープが設定されています。つまり、ページ上の任意の要素にアクセスできます。これとは対照的に

、

this.$() 

は、現在のコンポーネントまたはビューにスコープされているので、あなたは子であるDOM要素をのみアクセスすることができます。

一般的には、this.$を使用する必要があります（検索スペースが子要素のみであるため）。 Ember.$は、現在のコンテキスト外にある要素に絶対的にアクセスする必要がある場合に備えて予約する必要があります。