如何在 HTMLBars 中编写 Helpers？答案

【问题标题】：How to write Helpers in HTMLBars?如何在 HTMLBars 中编写 Helpers？
【发布时间】：2015-04-21 21:14:48
【问题描述】：

在 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 小提琴：http://jsfiddle.net/sisir/p463q2L8/

如何将其转换为 htmlbars？

【问题讨论】：

Fiddle 更新到 Ember 1.10，HTMLBars 仍然有效 - jsfiddle.net/qj6v3vuf - 我不知道 Ember 团队的计划是什么，但也许即使你使用的是 Ember.Handlebars 命名空间 - 在内部这个被定向到 HTMLBars。我在 HTMLBars 中看到的唯一方法是 Em.HTMLBars.makeBoundHelper，它被记录为私有。甚至我在stackoverflow.com/questions/28558696/… 中标记的新方法也在 Handlebars 命名空间中......所以也许让我们使用旧方法:)

标签： javascript ember.js handlebars.js handlebarshelper htmlbars

【解决方案1】：

我相信您可以使用 Ember.Handlebars.helper，这是最新的 emberjs guides 中的内容。这个jsbin 使用 htmlbars 并且它有效。这是 jsbin

中的助手

AppLogItHelper = Ember.Handlebars.helper("logIt", function(something){
  console.log(something);
});

如果您使用的是 ember-cli，它会自动为您生成一个，但使用 Ember.Handlebars.makeBoundHelper 在 jsbin 中不起作用但在我的 ember-cli 应用程序。

【讨论】：

因为 Ember 1.10.1 应该使用 Ember.HTMLBars.makeBoundHelper

【解决方案2】：

~~从 Ember 1.10.0 开始，这个问题通过 Ember.HTMLBars.makeBoundHelper(theHelperFunction) 解决。~~

编辑：自 Ember 1.13.6（2015 年 7 月 31 日）起，使用它被标记为已弃用。

弃用：不推荐使用 Ember.HTMLBars._registerHelper。助手（甚至是无破折号的）会自动解析。 [弃用 id：ember-htmlbars.register-helper]

【讨论】：

【解决方案3】：

从 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(' ');
});

Helper 接收两个参数：params 是传递给 helper 的有序参数，hash 包含键值选项，例如 title="Mr."。

【讨论】：

【解决方案4】：

一个非常重要的新奇事物是HTMLBars 有子表达式！由于 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}}

【讨论】：