ember-cli App.get / App.set throw undefined

Question

I'm converting a globals based real-time Ember app to an es6 based app that utilizes ember-cli. In my app I need to know the current route fairly often. In the globals version, I was doing this.

Globals Pattern

var MyApp = Ember.Application.create({
    currentRoute : ''
});

MyApp.Route = Ember.Route.extend({
    actions : {
        didTransition : function () {
            MyApp.set('currentRoute', this);
        }
    }
});

I could then do MyApp.get('currentRoute') from within my session or offline controllers when determining how / where to transition when certain events occurred.

When using ember-cli, I import the app to be able to reference it from the necessary controllers.

import MyApp from "../app";

But it turns out that MyApp.currentRoute, MyApp.get, and MyApp.set are all undefined.

Part of me thinks this is a bug in ember-cli that the application instance no longer has bound getters and setters. Part of me realizes it's not a great practice to store things on the application instance either.

I could get around this issue by converting all instances of MyApp.get and MyApp.set to Ember.get(MyApp, ...) and Ember.set(MyApp, ...) respectively, but I thought I'd ask here first as this seems to either be an issue with Ember-Cli or else something where there's a better recommended way to achieve what I need.

You don't need to myapp.stuff anymore when using cli, instead export Ember.route.extend({//your code}) and instead of MyApp.set use this.set — Patsy Issa
The only thing you ll need to import is ember, import Ember from 'ember'; ping me in the chat if you need help migrating it — Patsy Issa
I'm also having this issue. I'm migrating an ember-starter kit app to ember-cli, and I have the following problem: I used to store info about the current user in a property of the App object. So I used App.get('currentUser') throughout the app, and App.set('currentUser', x) on login/logout. Now this doesn't work. What could I apply as an alternative for a similar use? cc @BasementKeyboardHero — Ernesto
@Ernesto You ll have to look into dependency injection and initializers — Patsy Issa
Thanks @BasementKeyboardHero, dependency injection is exactly what I need to avoid global App properties. It'll be nice for others if you post this as an answer to this question instead of just suggesting its use in the comments. Thanks anyway! — Ernesto

atomkirk atomkirk · Accepted Answer · 2015-02-11T20:56:52

If you look at app.js (what you are importing), it is not your application instance, it is exporting a subclass of Ember.Application. That's why get et al are not available on it.

var App = Ember.Application.extend({   <----- NOT create
    modulePrefix: config.modulePrefix,
    podModulePrefix: config.podModulePrefix,
    Resolver: Resolver
});

export default App;

To get the actual application instance from within your route use:

Ember.getOwner(this).lookup('application:main')

ember-cli App.get / App.set throw undefined

1 Answers