How get component by element id?


#1

I want find component object by element id which is generated by ember-cli. Can anyone Help me?


#2

Sure thing. You’ll need a copy of your application instance. In our case, we store our application instance on the window.

Once you have the application instance, you can just do this:

App.__container__.lookup('-view-registry:main')[elementId];

We actually added a helper function to our application class to make this easier when debugging.

// my-app/app/app.js
export default Ember.Application.extend({
  /* ... */
  componentById: function(id) {
    if(id instanceof HTMLElement) {
      id = id.id;
    }
    return this.__container__.lookup('-view-registry:main')[id];
  }   
});

Then when you’re debugging you can just do window.App.componentById($0). $0 is of course the selected element in your chrome DOM tree debugger.


#3

Thanks workmanw very much… !!! )))


#4

You can also use the ember addon for chrome/firefox. It shows you your routes, controllers, components and models, with live updating as their state changs.