我有一个辅助方法,将数字映射到文本-
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
是可行的方法。向函数传递所需的数据。
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"
},
});