Handlebars helper i18n

Question

If I'm using an Ember.js built in helper input

{{input value=query class="form-input" placeholder="Search"}}

I want to replace the placeholder string "Search" with a translated version of that string.

Normally, if I wasn't already using the input helper, I would access the translated string like this:

{{ t "home.search" }}

Answer 1

Figured this out by using Subexpressions: http://handlebarsjs.com/expressions.html

{{input value=query class="form-input" placeholder=(t "home.search") }}

Answer 2

I couldn't get dylanjha's solution to work because Ember.I18n's t helper returns a span wrapped around the translated text, not the translated text itself. I solved this by writing my own helper that invokes the translation directly:

Ember.Handlebars.registerHelper('ts', function (key) {
  return Em.I18n.t(key);
});

I then was able to use my helper like this:

{{input value=login placeholder=(ts 'signin.login') }}

Answer 3

I use this in my app:

// This is a custom text field that allows i18n placeholders
App.TextField = Ember.TextField.extend({
    attributeBindings: ['autofocus', 'z-index', 'autocomplete'],

    placeholder: function () {
        if (this.get('placeholderKey')) {
            return I18n.t(this.get('placeholderKey'));
        } else {
            return ''; //or this.get('placeholder')
        }
    }.property('placeholderKey')
});