Ember js use handlebars helper inside a controller?

久未见 提交于 2019-12-23 12:16:23

问题


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


回答1:


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




回答2:


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.




回答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 e.g. 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"
  },
});


来源:https://stackoverflow.com/questions/25107586/ember-js-use-handlebars-helper-inside-a-controller

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!