Ember.js: Inject into a helper

Created on 4 May 2015 · 6Comments · Source: emberjs/ember.js

I have this:

export function initialize(container, application) {
    application.inject('component', 'store', 'store:main');
    application.inject('component', 'application', 'application:main');
    application.inject('component', 'applicationController', 'controller:application');
    application.inject('helper', 'applicationController', 'controller:application');
    application.inject('model:device', 'application', 'application:main');
    application.inject('model:room', 'application', 'application:main');
    application.inject('model:setting', 'application', 'application:main');
    application.inject('route:application', 'application', 'application:main');
    application.inject('transform', 'application', 'application:main');
}

export default {
  name: 'injections',
  initialize: initialize
};

notice:

application.inject('helper', 'applicationController', 'controller:application');

but in the helper, this.get('applicationController') is not defined:

import Ember from 'ember';
import environment from '../utils/environment';

export function staticImg(path, options) {
    if (path) {
        var staticRoot = this.get('applicationController').get('model.staticRoot');
        return new Ember.Handlebars.SafeString('<img src="' + environment.staticHost() + staticRoot + path + '" class="' + ( options.hash.classNames || "" ) + '">');
    }
    else {
        return "";
    }
}

export default Ember.Handlebars.makeBoundHelper(staticImg);

In the docs it says you can inject onto helpers, and this exact setup working on other framework classes but not here…

Source

atomkirk

Most helpful comment

For anyone coming across this later, helpers in Ember 2.x are now "real" objects and can have access to services (via Ember.inject.service or initializer based injections).

Example:

export default Ember.Helper.extend({
  i18n: Ember.inject.service('i18n'),

  compute(params, hash) {
    let i18n = this.get('i18n');
    // stuff here
  }
});

rwjblue on 4 Dec 2015

👍89 ❤11 🎉6 👎2

All 6 comments

You cannot inject into helpers. I believe that the docs have been updated, but please point me to where you noticed that it mentioned this was possible so we can fix the doc...

rwjblue on 4 May 2015

Ah crap, you did update them for 1.11. Thanks. Ok, then what is the direction we should go if we need access to container stuff from within helpers and especially plain Ember.Object instances (which have no container property)?

atomkirk on 4 May 2015

@atomkirk Instead of trying to inject something into a helper, you should inject into a controller/component and pass the injected object into the helper (or just use a computed property). Or just use a component instead of a helper.

mmun on 5 May 2015

What if i am using helper inside component and i need to access user data too that i normally inject to routes and controllers ? It's not accessible inside that helper.
Passing it to every component seems not efficient, i would need to make for example user.name for every component, while it's the same for all of them. So if i have 50 components i would need to pass the same value to 50 components to access it from helper inside component...
Any way to resolve this ?

devlo on 30 Jun 2015

This has been addressed in Ember.js 1.13 with closure actions. Please see:

mixonic on 30 Jun 2015

For anyone coming across this later, helpers in Ember 2.x are now "real" objects and can have access to services (via Ember.inject.service or initializer based injections).

Example:

export default Ember.Helper.extend({
  i18n: Ember.inject.service('i18n'),

  compute(params, hash) {
    let i18n = this.get('i18n');
    // stuff here
  }
});

rwjblue on 4 Dec 2015

👍89 ❤11 🎉6 👎2

Was this page helpful?

0 / 5 - 0 ratings