Getting ember-i18n.js Translation Keys from Controller Properties

Question

I just started working on an existing Ember.js project that uses ember-i18n.js for localization.

Ember.Mixin.create({
    setupController: function (controller, model) {
         controller.set("somePropertyName", "my.translation.key");
    }
});

I defined another helper that lets me get a translation key from a context property, instead of passing it in directly, eg I can use {{tr someContext.someProperty}} instead of {{t "my.translation.key"}} .

Ember.Handlebars.registerBoundHelper('tr', function(property, options) {
    return Ember.I18n.t(property);
});

I'm fairly new to Ember, so my thought process was that I would simply be able to swap out replace {{somePropertyName}} in my template with {{tr somePropertyName}} . That didn't work. When I set a breakpoint inside the helper, I see that property is always undefined.

I also tried modifying my helper to use Ember.Handlebars.get() as demonstrated here , but that also is resolved undefined.

Assuming I'm not able to change where the translation key is coming from, is there a proper way to get the translation key from the controller to the helper?

Answer 1

What you are doing should be fine - the property argument to the helper is just a string, and passing a string from a controller to a template (and then to a helper) is straightforward.

So, I'm guessing (and it's just a guess without a jsbin) that either you have a coding issue somewhere. Or something weird is going on with your use of the mixin, perhaps.

I'd see how far the string property is getting from your mixin to the controller to the template to the helper.

If you change {{tr property}} does the string get written out into your template ok? If not, then the property isn't being set on your controller.

If you have a jsbin, then that would make it easier to see what is going on.