How to write Helpers in HTMLBars?

Question

After the latest version of EmberJS v1.9.0 I am trying to switch from Handlebars to HTMLbars. What I find very difficult is the lack of documentation.

I am trying to implement very simple helpers.

For example, take these 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 to convert it to htmlbars?

Answer 1

As in 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:

 export default Ember.Helper.helper(function(params, hash) { return params.join(' '); }); 

Helpers get two arguments: params are the ordered parameters passed to the helper, and the hash contains the key value parameters, for example title = "Mr.".

Answer 2

Starting with Ember 1.10.0, this issue is resolved by executing Ember.HTMLBars.makeBoundHelper(theHelperFunction) .

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

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

Answer 3

I believe you can simply use Ember.Handlebars.helper , which is the latest emberjs tutorials . This jsbin uses htmlbars and it works. This is jsbin helper

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

If you use ember-cli , it will automatically generate one for you, but it uses Ember.Handlebars.makeBoundHelper , which does not work in jsbin but works in my ember-cli application.

Answer 4

Very important new: HTMLBars have a subexpression ! Since Ember 1.10+ has been switched to HTMLBars, you should use Ember.HTMLBars.makeBoundHelper instead of Ember.Handlebars.registerHelper . But you can still use Ember.Handlebars.registerHelper from Ember version 1.10.1

New approach:

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

it calls from templates:

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