如何在 HTMLBars 中编写 Helpers?
How to write Helpers in HTMLBars?
在最新版本的 EmberJS v1.9.0
之后,我正在尝试从 Handlebars 转移到 HTMLbars。我发现非常具有挑战性的是缺乏文档。
我正在尝试实现非常简单的助手。
例如拿这个车把助手:
HTML
<div id="main"></div>
<script type="text/x-handlebars" data-template-name="index">
{{logIt test}}
<h1>{{test}}</h1>
</script>
JS
App = Ember.Application.create({
rootElement: '#main'
});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller){
controller.set('test', 'mytest');
}
});
Ember.Handlebars.registerHelper("logIt", function(something) {
console.log(something);
});
Js Fiddle: http://jsfiddle.net/sisir/p463q2L8/
如何将其转换为 htmlbars?
我相信您可以只使用 Ember.Handlebars.helper,这是最新的 emberjs guides. This jsbin 使用 htmlbars 并且它可以工作。这是 jsbin
中的助手
AppLogItHelper = Ember.Handlebars.helper("logIt", function(something){
console.log(something);
});
如果您正在使用 ember-cli,它会自动为您生成一个,但使用 Ember.Handlebars.makeBoundHelper 在 jsbin 中不起作用,但在我的 ember-cli 应用程序中有效。
从 Ember 1.10.0 开始,这个问题通过 Ember.HTMLBars.makeBoundHelper(theHelperFunction)
.
解决
编辑: 自 Ember 1.13.6(2015 年 7 月 31 日)起,使用它被标记为已弃用。
DEPRECATION: Using Ember.HTMLBars._registerHelper is deprecated. Helpers (even dashless ones) are automatically resolved. [deprecation id: ember-htmlbars.register-helper]
从 Ember 1.13 开始,有两个 API:http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_new-ember-js-helper-api
现在最简单、更常用的语法是这样的:
export default Ember.Helper.helper(function(params, hash) {
return params.join(' ');
});
Helpers receive two arguments: params are the ordered params passed to a helper, and hash contains the key-value options, for example title="Mr.".
一个非常重要的新奇点是HTMLBar 有子表达式!由于 Ember 1.10+ 已切换到 HTMLBars,因此您应该使用 Ember.HTMLBars.makeBoundHelper 而不是 Ember.Handlebars.registerHelper
。但是您仍然可以使用 Ember 1.10.1 版本
中的 Ember.Handlebars.registerHelper
新方法:
App.XEqHelper = Ember.HTMLBars.makeBoundHelper(function(params, hash, options, env) {
return params[0] === params[1];
});
它从模板调用为:
{{#if (x-eq order 'delivery_order')}}
Need a delivery
{{/if}}
在最新版本的 EmberJS v1.9.0
之后,我正在尝试从 Handlebars 转移到 HTMLbars。我发现非常具有挑战性的是缺乏文档。
我正在尝试实现非常简单的助手。
例如拿这个车把助手:
HTML
<div id="main"></div>
<script type="text/x-handlebars" data-template-name="index">
{{logIt test}}
<h1>{{test}}</h1>
</script>
JS
App = Ember.Application.create({
rootElement: '#main'
});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller){
controller.set('test', 'mytest');
}
});
Ember.Handlebars.registerHelper("logIt", function(something) {
console.log(something);
});
Js Fiddle: http://jsfiddle.net/sisir/p463q2L8/
如何将其转换为 htmlbars?
我相信您可以只使用 Ember.Handlebars.helper,这是最新的 emberjs guides. This jsbin 使用 htmlbars 并且它可以工作。这是 jsbin
中的助手AppLogItHelper = Ember.Handlebars.helper("logIt", function(something){
console.log(something);
});
如果您正在使用 ember-cli,它会自动为您生成一个,但使用 Ember.Handlebars.makeBoundHelper 在 jsbin 中不起作用,但在我的 ember-cli 应用程序中有效。
从 Ember 1.10.0 开始,这个问题通过 Ember.HTMLBars.makeBoundHelper(theHelperFunction)
.
编辑: 自 Ember 1.13.6(2015 年 7 月 31 日)起,使用它被标记为已弃用。
DEPRECATION: Using Ember.HTMLBars._registerHelper is deprecated. Helpers (even dashless ones) are automatically resolved. [deprecation id: ember-htmlbars.register-helper]
从 Ember 1.13 开始,有两个 API:http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_new-ember-js-helper-api
现在最简单、更常用的语法是这样的:
export default Ember.Helper.helper(function(params, hash) {
return params.join(' ');
});
Helpers receive two arguments: params are the ordered params passed to a helper, and hash contains the key-value options, for example title="Mr.".
一个非常重要的新奇点是HTMLBar 有子表达式!由于 Ember 1.10+ 已切换到 HTMLBars,因此您应该使用 Ember.HTMLBars.makeBoundHelper 而不是 Ember.Handlebars.registerHelper
。但是您仍然可以使用 Ember 1.10.1 版本
Ember.Handlebars.registerHelper
新方法:
App.XEqHelper = Ember.HTMLBars.makeBoundHelper(function(params, hash, options, env) {
return params[0] === params[1];
});
它从模板调用为:
{{#if (x-eq order 'delivery_order')}}
Need a delivery
{{/if}}