Ember js在控制器中使用handlebars helper

Ember js use handlebars helper inside a controller?

本文关键字：handlebars helper js 控制器 Ember      更新时间：2023-09-26

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

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内部的操作中使用helper呢?

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

使用ember-cli可以这样做:

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

Helper foo导出一个函数(包含Helper逻辑)和一个封装在Ember Helper中的函数(用于模板)。

// 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函数，并在它自己的模板Helper中使用它。

将逻辑从helper中取出，使其既可以被helper调用，也可以被非句柄的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

大多数帮助程序都很简单。在这种情况下，导出一个香草function是可行的方法。向函数传递所需的数据。

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

但是，函数的参数列表对于其他调用者来说可能会变得笨拙。

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

要从容器查找中受益，而不是调用普通函数，您可以手动实例化这样的helper并自己调用compute。这是罕见的。但是它受益于一个较小的接口，与您在模板中调用它的方式一致。helper通常由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"
  },
});
相关文章：