Ember js uses helper helper inside controller?
I have a helper method that maps a number to 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 can use a helper in the view using {{getStatusText 1}}
But how can I use the helper in action inside the ObjectController object?
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 doesn't work.
What are the other ways?
For better understanding here is jsbin
source to share
Extract the logic from the helper by making it callable by both the helper and non-helm auxiliaries. Analyzing it in a rudder template and evaluating it complicates it.
If you put it in its place, you can use it in your application, 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);
});
source to share
With ember-cli, it can be done like this:
// helpers/foo.js
export function foo(params) {
return params;
}
export default Ember.Helper.helper(foo);
The helper foo
exports a function (containing helper logic) and a 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);
The helper bar
imports a helper function from foo
and uses it in its own template helper.
source to share
Most of the helpers are simple. In this case, vanilla exportfunction
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 use other container dependencies. You may still have a compute
class based helper method that calls your exported vanilla function.
However, the function parameter list can become inconvenient 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 looking up the container rather than calling a vanilla function, you can manually create such a helper and call it compute
yourself. This is rare. But it does benefit from a small interface that is consistent with how you name it in the template. The helper is usually created by HTMLBars for use in a template that has special context and observation rules. So a little hoop jumps to use it inside yours, for example. 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"
},
});
source to share