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

Question

我有一个帮助方法，将数字映射到文本 -

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";
    }
});

我可以使用{{getStatusText 1}}在视图中使用帮助器

但是如何在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}});
        }
    },

});

这显然不起作用。

还有什么其他方法？

为了更好地理解，这里是jsbin

Answer 1

使用ember-cli可以这样做：

// helpers/foo.js
export function foo(params) {
    return params;
}
export default Ember.Helper.helper(foo);

Helper foo导出一个函数（包含辅助逻辑）和包装在Ember帮助器中的函数（用于模板）。

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

Helper bar从foo导入helper函数，并在它自己的模板助手中使用它。

Answer 2

将逻辑从帮助器中拉出来，使其可以由助手调用，也可以由非把手辅助项目调用。 将其解析为车把模板并对其进行评估使其过于复杂化。

您放置它取决于您，您可以将其命名为您的应用程序，或者只是将其创建为与您的帮助程序一起使用的功能。

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

大多数助手都很简单。 在这种情况下， 导出vanilla function是可行的方法。 将功能完全传递给所需的数据。

Ember还为更复杂的用例提供了基于类的帮助程序。 他们可以利用其他容器依赖项。 您仍然可以使用基于类的帮助程序的compute方法调用导出的vanilla函数。

但是，函数的参数列表可能会对其他调用者变得难以处理。

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], ...);
  },
});

要从容器查找中受益，而不是调用vanilla函数，您可以手动实例化这样的帮助程序并自己调用compute 。 这很少见 。 但它受益于一个小的界面，与您在模板中调用它的方式一致。 帮助程序通常由HTMLBars实例化，以便在模板中使用，该模板具有特殊的上下文和观察规则。 因此，在你的eg控制器中有一个小箍跳跃使用它。

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"
  },
});