Difference between 'Helper', 'RegisterHelper' and 'RegisterBoundHelper'?

Question

As the title suggests, I am looking for the difference in usage of the above helper creation functions with Ember.js.

1. Helper (From Ember.js API Docs):

   helper (name, function, dependentKeys)

   Register a bound helper or custom view helper.

   Example:

   Ember.Handlebars.helper('capitalize_h', function(value) {
     return value.toUpperCase();
   });
   

2. RegisterHelper (From Handlebars.js):

   Example:

   Handlebars.registerHelper('capitalize_rh', function(value) {
     return value.toUpperCase();
   });
   

3. RegisterBoundHelper (From Ember.js API Docs):

   Example:

   Ember.Handlebars.registerBoundHelper('capitalize_rbh', function(value) {
     return value.toUpperCase();
   });
   

---

From using the 3, I found that :

1. Ember's helpers (helper & registerBoundHelper) can also work on a model's property,

   For example:

   Assuming that model has property name with value 'Vageesh', so the following will provide the same result, i.e., 'VAGEESH':

   {{ capitalize_h name }} 
   

   And

   {{ capitalzie_rbh name }}
   

2. But, Handlebars 'register helper' will not work in the above way, i.e., result will be 'NAME':

   {{ capitalize_rh name }}
   

---

So, are there any other differences in usage or is this the only difference?

Also, which helper creation method is advised under what circumstances?

Answer 1

Ember.Handlebars.helper and Ember.Handlebars.registerBoundHelper extend registerHelper handlebars method with EmberJS specific features as data binding or view creation.

registerBoundHelper creates a bound helper.

Bound helpers behave similarly to regular handlebars helpers, with the added ability to re-render when the underlying data changes.

Ember makes available Handlebars instance with Ember.Handlebars ( i think, it is not recommended you access directly to the Handlebars instance), and it allow you to write specific handlebars method with the registerHelper method whose function parameter accepts the format:

Ember.Handlebars.helper('myHelperName', function(property, options) {

});

If you define your helpers using the registerHelper method, your helper will be in charge of observing data changes and re-render its data if it would be necessary.

Answer 2

Ember.Handlebars.registerBoundHelper will re-render if the underlying data changes.

Ember.Handlebars.registerHelper will not re-render when the underlying data changes.

Ember.Handlebars.helper is an alias to either Ember.Handlebars.registerBoundHelper or Ember.Handlebars.registerHelper depending on what is passed in the arguments. If you're trying to create a custom view helper, Ember.Handlebars.helper will call Ember.Handlebars.registerHelper internally, otherwise, it will call Ember.Handlebars.registerBoundHelper. In your example (and most uses cases for that matter), you can consider 'helper' to be the same as 'registerBoundHelper':

Ember.Handlebars.helper('capitalize_h', function(value) {
  return value.toUpperCase();
});

...is the same as...

Ember.Handlebars.registerBoundHelper('capitalize_h', function(value) {
  return value.toUpperCase();
});