3

In a regular emberjs app you can do

App.__container__.lookup("controller:application")

How can I achieve this is the latest version of ember-cli? I can't see any global application object to refer to.

jax
  • 37,735
  • 57
  • 182
  • 278
  • 1
    What do you want to achieve? Perhaps there is an easier way. – givanse Nov 23 '14 at 23:59
  • @givanse I just want to quickly check the number of components of a particular type are on the screen in real time for debugging purposes. I would like to run a method on my component from the debugger and such. – jax Nov 24 '14 at 02:24
  • That still is too vague. Is there only one type of components? Or many different instantiations of different classes? An `ArrayController` might be an option, count them when you create them. – givanse Nov 24 '14 at 04:18
  • 1
    @givanse I want to do this: `App.__container__.lookup("component:bootstrap-datepicker")`, I want to do this from the Google Chrome console window. I don't want to do this as part of my application because it has nothing to do with it. It is for my own personal debugging only. In regular Ember this is possible, I want the equivalent in ember-cli. – jax Nov 25 '14 at 03:46
  • I had exactly similar question, and was able to get resolve from this answer: https://stackoverflow.com/a/58634250/2305243 Please refer to that. – Alan Dong Mar 02 '20 at 19:34

3 Answers3

4

Say you generated your app like this:

ember new kittens

Your debug statement would be:

Kittens.__container__.lookup("component:bootstrap-datepicker")
givanse
  • 14,503
  • 8
  • 51
  • 75
  • For me running `ember-cli@0.1.2` there is no global variable available. In previous versions of ember-cli I was able to do as you describe. – jax Nov 25 '14 at 05:54
  • Something funky must be going on then, because I just tested it in 0.1.2 In the past I have encountered issues like that because I changed the name of the app in `config/environment.js`, but forgot to update a few other places. – givanse Nov 25 '14 at 06:50
  • Are you saying that when you tested it on 0.1.2, it didn't work for you either? Or is there something wrong with my project? – jax Nov 25 '14 at 21:27
0

In Ember CLI when you define an initializer you can do something like:

ember generate initializer my-cool-init

And in the file: app/initializers/my-cool-init.js have something like:

export default {
  name: 'my-cool-init',

  initialize: function initialize(container/*, application*/) {
    var foobar = container.lookup('controller:application');
    // inject or preload stuff etc
  }
};

http://emberjs.com/api/classes/Ember.Application.html#toc_initializers

http://emberjs.com/guides/understanding-ember/dependency-injection-and-service-lookup/

givanse
  • 14,503
  • 8
  • 51
  • 75
  • This is not quite what I am looking for. I want a way I can easily check a component in developer tools for debugging etc. – jax Nov 24 '14 at 02:25
0

2 options

  1. Ember Inspector Chrome extension
  2. Use ember-export-application-global addon to expose your app as a global variable

Ember Inspector Chrome extension

Check out the Ember Inspector on the Chrome web store. It is a Chrome extension that provides debugging and inspection tools for your Ember app.

You can visually access the container, your current view hierarchy, a list of your Ember-Data store's contents, etc.

For example, if you open the inspector on discuss.emberjs.com you can see that there are 11 controllers and you can inspect each one to see their attributes. You can even send the objects to the console so you can play with them programmatically.

enter image description here

Use ember-export-application-global

The other way is to use the ember-export-application-global ember-cli addon package. This package sets a global variable that contains the reference to your application. This allows you to access the container the way you originally mentioned.

CraigTeegarden
  • 8,173
  • 8
  • 38
  • 43