Come ottenere l'ID elemento generato da Emberjs nel controller

Question

Vorrei ottenere l'ID generato da Ember di un elemento.

{{#each}} 
<div> 
<h1>{{MyComponent}}</h1> 
</div> 
{{/each}} 

che rendono qualcosa di simile:

<div id="ember180" class="ember-view"> 
<h1>My Component here</h1> 
</div> 

ho bisogno di ottenere l'id di ogni elemento div all'interno di un controllore. Se devo usare l'ID personalizzato, come posso creare un ID personalizzato usando la vista ember.

E come posso identificare ciascun elemento div tramite il suo id all'interno del controller?

Answer 1

io non sono sicuro di quello che vuoi dire, ma posso rispondere:

E come posso identificare ogni elemento div id dal suo interno controllore?

Working Example sguardo al console.log per vedere l'elemento id, e quindi utilizzare Google Chrome o Firebug per ispezionare l'elemento costitutivo di vedere che l'id è lo stesso.

App.ItemOneComponent = Ember.Component.extend({ 
    didInsertElement: function(){ 
    console.log('element id: ' + this.elementId); 
    } 
}); 

this all'interno del componente è il componente, e elementId ottiene il id del div (o tag differenti se si usa tagName all'interno del componente).

Se si desidera selezionare il componente con JQuery, utilizzare: this.$() all'interno del componente.

Ora qui è dove non so di cosa hai bisogno, quindi ho intenzione di lanciare alcuni suggerimenti. Se è necessario conoscere gli ID di ogni componente dal controller, si consiglia di passare un array seduto sul controller al componente. Nel tuo didInsertElement, aggiungi lo elementId o l'oggetto jQuery all'array. Here is what I mean

App.IndexController = Ember.ArrayController.extend({ 
    componentIds: [] 
}); 

App.ItemOneComponent = Ember.Component.extend({ 
    didInsertElement: function(){ 
    this.get('array').pushObject(this.elementId); 
    } 
}); 

E il componente passa la struttura in: {{item-one array=controller.componentIds}}

Si può anche inviare id del componente o jQuery oggetto tramite un'azione con this.sendAction('actionName', componentId) e hanno un'azione definita sul controller che prende un parametro (ad esempio la ComponentID o l'oggetto jQuery.

Answer 2

si può anche trattare con l'emberId prima che venga inserito nel codice HTML.

App.ItemOneComponent = Ember.Component.extend({ 
    willInsertElement: function(){ 
     var emberId = this.get('elementId'); 
    } 
}); 

Answer 3

È possibile creare un ID personalizzato per il componente utilizzando lo elementId property.

È possibile creare l'id legandosi al modello di componente in questo modo

{{my-component elementId="your-id-name"}} 

o nel file componente

export default Ember.Component.extend({ 
    elementId: 'your-id-name' 
});