How to write Helpers in HTMLBars?

Question

After the latest release of EmberJS v1.9.0 I am trying to move from Handlebars to HTMLbars. What I am finding very challenging is lack of documentation.

I am trying to implement very simple helpers.

For example take this handlebars helpers:

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/

How do I convert it to htmlbars?

Kuomintang

Fiddle update to Ember 1.10, with HTMLBars still works - jsfiddle.net/qj6v3vuf - I don't know what are the plans of Ember team but maybe even if you are using the Ember.Handlebars namespace - internally this is directed to HTMLBars. The only method I see in HTMLBars is Em.HTMLBars.makeBoundHelper, which is documented as private. Even new method, which I marked in #28559196, is in Handlebars namespace... So maybe just let's go with old ways :) – Approach

Answer 1

As of Ember 1.13, there are two APIs: http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_new-ember-js-helper-api

The simplest and more common syntax is now this:

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.".

Tical

Answer 2

As of Ember 1.10.0, this question is solved by doing Ember.HTMLBars.makeBoundHelper(theHelperFunction).

Edit: since Ember 1.13.6 (July 31, 2015), using this is flagged as deprecated.

DEPRECATION: Using Ember.HTMLBars._registerHelper is deprecated. Helpers (even dashless ones) are automatically resolved. [deprecation id: ember-htmlbars.register-helper]

Rosario

Answer 3

I believe you can just use Ember.Handlebars.helper which is what is in the latest emberjs guides. This jsbin uses htmlbars and it works. This is the helper in the jsbin

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

If you are using ember-cli it will auto generate one for you but that uses Ember.Handlebars.makeBoundHelper which doesn't work in the jsbin but works in my ember-cli app.

Irrelevancy

Since Ember 1.10.1 should use Ember.HTMLBars.makeBoundHelper – Purim

Answer 4

Very an important novelty is HTMLBars have subexpression! Since Ember 1.10+ was switched to HTMLBars and you should use Ember.HTMLBars.makeBoundHelper instead Ember.Handlebars.registerHelper. But you can still use Ember.Handlebars.registerHelper from Ember 1.10.1 version

New approach:

App.XEqHelper = Ember.HTMLBars.makeBoundHelper(function(params, hash, options, env) {
    return params[0] === params[1];
    });

it call from templates as:

{{#if (x-eq order 'delivery_order')}}
    Need a delivery
{{/if}}

Purim