How to get Emberjs generated element id in controller

Question

I would like to get the Ember generated id of an element.

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

which render something like:

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

I need to get the id of each div element inside a controller. If I've to use custom id then how can I create custom id using ember view.

And how can I identify each div element by its id inside controller?

Answer 1

I'm not sure exactly what you mean, but I can answer:

And how can I identify each div element by its id inside controller?

Working Example Look at the console.log to see the element id, and then use Google Chrome or Firebug to inspect the component element to see that the id is the same.

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

this inside the component is the component, and elementId gets the id of the div (or different tag if you use tagName inside the component).

If you want to select the component with JQuery, use: this.$() inside of the component.

Now here is where I don't know what you need so I'm going to throw out a few suggestions. If you need to know the ids of every component from the controller, I would recommend passing in an array sitting on the controller to the component. In your didInsertElement, add the elementId or the jQuery object to the 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);
  }
});

And your component passes the property in: {{item-one array=controller.componentIds}}

You could also send the component's id or jQuery object via an action with this.sendAction('actionName', componentId) and have an action defined on your controller that takes one parameter (ie the componentId or the jQuery object.