Ember js在控制器内使用把手帮手？

Question

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";
            break;
        case 2: return "Callback";
            break;
        default: return "Unable to get Status";
    }
});

I am able to use the helper in the view by using {{getStatusText 1}}

But how do I use the helper in an action inside an ObjectController ?

Test.DealController = Ember.ObjectController.extend({

    selectedStatusType: null,
    statusList: ["Fresh","Callback"],

    actions: {
        updateStatus: function(deal) {
// How do I call the handlebars helper here ?
            console.log({{getStatusText 1}});
        }
    },

});

this obviously does not work.

What are the other ways ??

For better understanding, here is the jsbin

Answer 1

With ember-cli it can be done like this:

// helpers/foo.js
export function foo(params) {
    return params;
}
export default Ember.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.js
import { foo } from '<project>/helpers/foo';
export function bar(params) {
    return foo(params);
}
export default Ember.Helper.helper(bar);

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

Answer 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.

function getStatusText(value){
    switch(value) {
        case 1: return "Fresh";
            break;
        case 2: 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

Answer 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.

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

export function vanillaFunction(imageService, userService, foo, bar, baz, dependency3, options) {
  ...
}

export default Helper.extend({

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

  compute(positionalParams, hashParams) {
    return vanillaFunction(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 eg controller.

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

export default Controller.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 you
    return helperInstance.compute([1]); // "Fresh"
  },
});