Ottenere elemento per ID in Ember

Question

Sono in esecuzione due applicazioni ember. Uno ha i seguenti componenti:

import Ember from 'ember'; 

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

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

e l'altra, ha questo:

import Ember from 'ember'; 

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

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

Quello che non riesco a capire il motivo per cui è qui in una sola applicazione seleziono un elemento per ID utilizzando Ember.$('#wrapper') e nell'altro utilizzando this.$('#wrapper').

Di cosa si tratta? Versione ambra?

UPDATE

Sono molto perplesso, dal momento che entrambi i componenti sono gli stessi:

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

Sono entrambi i menu hamburger utilizzati per nascondere un div barra laterale, e il #wrapper è un elemento esterno .

Poiché in entrambi i casi gli #wrapper sono elementi esterni, non dovrebbe essere solo il primo caso di lavoro @Gaurav e @Kevin Jhangiani?

Answer 1

Ember.$('#wrapper') troverà un elemento nella pagina con l'id del wrapper.

this.$('#wrapper') troverà un elemento all'interno del componente con l'id del wrapper.

Se esiste la possibilità che il componente che si sta definendo si verifichi più volte nella pagina, non si dovrebbe utilizzare né. Modificare il modello appropriato in modo che wrapper sia una classe, non un ID. Quindi utilizzare:

this.$('.wrapper')

Answer 2

Dal momento che sono essenzialmente solo attiva o inattiva una classe, l'altro modo "Ember" di fare questo sta avendo una classe subordinata tuo wrapper e attivare una proprietà sul componente:

importa Ember da 'ember';

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

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

Poi, il vostro elemento DOM è possibile avere una classe condizionale:

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

o, se si utilizza una versione precedente di Ember:

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

Questo è un po ' più riutilizzabile in quanto il componente non si basa su un elemento DOM (che può diventare disordinato se si desidera riutilizzare questo componente mai).

Answer 3

La differenza è nel contesto del selettore jquery.

Ember.$() 

è interessato all'intero documento, ovvero è possibile accedere a qualsiasi elemento della pagina.

Al contrario,

this.$() 

è limitato l'ambito del componente o vista corrente, e quindi si può solo elementi DOM accesso che sono figli.

In genere, si dovrebbe usare this.$ in quanto sarà più performante (poiché lo spazio di ricerca è solo elementi figlio). Ember.$ deve essere riservato alle volte in cui è assolutamente necessario accedere a un elemento al di fuori del contesto corrente.