Creating a custom unbound helper in ember.js

3
votes

In an ember.js application, I have created a custom helper which is used for text localization. Specifically, it is passing the value given to the helper through Jed, a gettext-style text translation library like so:

Ember.Handlebars.helper('_', function(value, options) {
    return Lang.gettext(value); 
});

And in my templates:

{{_ "Translate Me"}}

The problem is that ember renders this as a bound helper, i.e. the rendered text value is surrounded in <script id="metamorph-*"> tags, but as the values will never change, I want them to be unbound in order to avoid the extra overhead and markup.

In the API docs I did see the workaround solution for this:

The {{unbound}} helper can be used with bound helper invocations to render them in their unbound form, e.g.

However I would much prefer a way to just globally define my helper as an unbound helper, so that I don't have to type {{unbound _ "Foo"}} for every localized string. Not to mention that doing this would cause the strings to not be parseable by the library I use (xgettext-template) to extract all the localized strings from the source code.

2
ember.jslocalizationhandlebars.js
are you sending in bound properties? or are you always sending in raw text? aka {{_ translateThisProperty}} – Kingpin2k
@kingpin2k always raw text – Bill Dami
Thanks for this question. Using registerHelper works fine for the base case, but what about ngettext? I want to do {{ngettext 'person' 'people' count}}, where count is bound. – user663031

2 Answers

2
votes

Quick answer, if you aren't binding properties to your function you can use registerHelper

Ember.Handlebars.registerHelper('_', function(value, options) {
    return value + 'moo';
});
1
votes

just in case you may need this.

Calling a Handlebars Helper From Another Handlebars Helper

Ember.Handlebars.helper('_', function(value, options) {
    return Lang.gettext(value);
});

Ember.Handlebars.registerHelper('i18n', function(value, options){
    var args = Array.prototype.slice.call(arguments, 1);
    args.unshift(value);
    args.unshift('_');
    return Ember.Handlebars.helpers.unbound.apply(this, args);

});

use like this {{i18n "Translate Me"}}

here is JSBin