ember.js hbs view helper in TextFieldView

Question

i am new to ember.js. I have a custom view helper:

Ember.Handlebars.helper('translate', function(value, options) {
    return JoblyApp.i18n.__(value) || options.hash.def;
});

I need to apply this helper in the TextField:

{{view Ember.TextField valueBinding="somevalue" placeholder="{{translate "city_or_region"}}" }}

how can i achieve this the best way?

Answer 1

You can't use handlebar helpers inside other handlebar helpers. I would work around this by extending the Ember.TextField to translate the placeholder automatically.

I have created this JSBin demo . Note: It doesn't translate, it uses a dummy function to just uppercase the placeholder text. Replace with your function.

Extended Input:

JoblyApp.TranslateableTextFieldView = Ember.TextField.extend({
    didInsertElement: function(){
        for(var key in this){
            if(key.substr(0,2)==="t_"){
                var value = this.get(key);
                this.set(key.substr(2, key.length - 2), JoblyApp.i18n.__(value));
            }
        }
    }
});

Usage:

{{view JoblyApp.TranslateableTextFieldView valueBinding="somevalue" t_placeholder="city_or_region"}}

Note I have used t_ as the prefix to search for, not __ as Ember uses this key on private members of it's object. So I would avoid using this to prefix to prevent collisions.

Answer 2

this did the trick:

App.TranslateableTextFieldView= Ember.TextField.extend({
      didInsertElement: function() {
        for (var key in this) {
            if (key.substr(0,2) == '__') {
                var keyName = key.substr(2, key.length);
                var value = this.get(key);
                this.set(keyName,App.i18n.__(value));
            }
        }
      }
    });