Ember Js Use Handlebars Helper Inside A Controller?

I have a helper method that maps a number to a text - Ember.Handlebars.helper('getStatusText', function (value, options) { switch(value) { case 1: return 'Fresh';

Solution 1:

With ember-cli it can be done like this:

// helpers/foo.jsexportfunctionfoo(params) {
    return params;
}
exportdefaultEmber.Helper.helper(foo);

Helper foo exports a function (containing the helper logic) and the function wrapped in an Ember helper (for use in a template).

// helpers/bar.jsimport { foo } from'<project>/helpers/foo';
exportfunctionbar(params) {
    returnfoo(params);
}
exportdefaultEmber.Helper.helper(bar);

Helper bar imports the helper function from foo and uses it in it's own template helper.

Solution 2:

Pull the logic out of the helper, making it available to be called both by the helper, and by non handlebars helper items alike. Parsing it into handlebars template and evaluating it is over complicating it.

Where you put it is up to you, you could namespace it to your app, or just create it as a function that lives with your helper.

functiongetStatusText(value){
    switch(value) {
        case1: return"Fresh";
            break;
        case2: return"Callback";
            break;
        default: return"Unable to get Status";
    }
}

Ember.Handlebars.helper('getStatusText', function (value, options) {
  return getStatusText(value);
});

http://emberjs.jsbin.com/cenep/1/edit

Solution 3:

Most helpers are simple. In this case, exporting a vanilla function is the way to go. Pass the function exactly the data it needs.

Ember also has class-based helpers for a more complex use case. They can leverage other container dependencies. You can still have a class-based helper's compute method call your exported vanilla function.

However, the parameter list to the function could get unwieldy for other callers.

importHelperfrom'ember-helper';
import service from'ember-service/inject';

exportfunctionvanillaFunction(imageService, userService, foo, bar, baz, dependency3, options) {
  ...
}

exportdefaultHelper.extend({

  imageService: service('image'),
  userService: service('user'),

  compute(positionalParams, hashParams) {
    returnvanillaFunction(this.get('imageService'), this.get('userService'), positionalParams[0], positionalParams[1], ...);
  },
});

To benefit from container lookups, rather than call the vanilla function, you can manually instantiate such a helper and call compute yourself. This is rare. But it benefits from a small interface, uniform with how you'd call it in the template. The helper is normally instantiated by HTMLBars for use within a template, which has special context and observation rules. So there's a little hoop jumping to use it inside your e.g. controller.

importControllerfrom'ember-controller';
import getOwner from'ember-owner/get';
import setOwner from'ember-owner/set';

exportdefaultController.extend({
  someMethod() {
    const owner = getOwner(this);
    const helperFactory = owner.resolveRegistration('helper:my-helper');
    const helperInstance = helperFactory.create();
    setOwner(helperInstance, owner); // I'm not sure why the factory doesn't do this for youreturn helperInstance.compute([1]); // "Fresh"
  },
});