Ember js 在控制器中使用车把助手？答案

【问题标题】：Ember js use handlebars helper inside a controller?Ember js 在控制器中使用车把助手？
【发布时间】：2014-08-03 18:05:46
【问题描述】：

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

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

【问题讨论】：

标签： javascript ember.js handlebars.js

【解决方案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 导入帮助函数，并在它自己的模板帮助器中使用它。

【讨论】：

这应该是一个可以接受的答案。无需对实施进行任何更改就可以像天才一样工作。当助手实现他们正在做的事情时，这很好，不包括外部函数和保持助手原子。
如果你可以调用 foo() 那么你当然可以调用 bar()

【解决方案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

【讨论】：

在 ember-cli 中，您可能会将 getStatusText 封装在服务中吗？
我不知道你是否需要它的服务，但是，把它拉出来，把它放在两个地方的其他可访问的对象中。

【解决方案3】：

大多数助手都很简单。在这种情况下，exporting a vanilla function 是要走的路。准确地传递函数所需的数据。

Ember 还有class-based helpers 用于更复杂的用例。他们可以利用其他容器依赖项。您仍然可以让基于类的帮助器的 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 实例化以在模板中使用，该模板具有特殊的上下文和观察规则。所以有一个小箍跳来使用它在你的例如。控制器。

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

【讨论】：