Inserting a translation into a placeholder with Emblem.js

Question

I'm trying to write a login form with ember.js/emblem.js. Everything works, unless I try I18ning the placeholders like so:

Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"
Em.TextField valueBinding="view.password" placeholder="#{t 'users.attributes.password'}" type="password"

I get the same response if I try:

= input value=view.username placeholder="#{t 'users.attributes.username}"
= input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"

In both cases, I get this error message:

Pre compilation failed for: form
. . . .
Compiler said: Error: Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found.   Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"

I assume this is happening because I'm trying to compile something from within a statement that's already being compiled. In evidence of this, I don't get the runtime error if I change the code to:

input value=view.username placeholder="#{t 'users.attributes.username}"
input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"

But the downside is that the value bindings no longer work, which still leaves the form nonoperational. Is there another way of approaching this problem that I haven't considered?

Answer 1

As Alexander pointed out, this is a limitation of Ember and Handlebars. The workaround that I've been using is to make the placeholder refer to a controller property which then returns the translated string. For example:

{{input
    type="text"
    value=controller.filterText
    placeholder=controller.filterPlaceholder }}

And then in the controller:

filterPlaceholder: function () {
    return i18n.t('players.filter');
}.property('model.name'),

Answer 2

This is beyond the scope of what Emblem can do because it's an inherent limitation of Ember+Handlebars. What you're trying to do is use the input helper and, inside the helper invocation, use another helper t to get the value for the placeholder option. You can't (presently) do this in Ember, so Emblem's not going to be able to do that for you.

edit: you should try the Ember i18n library. I haven't used it yet, but it seems like what you'll want to do is to mix in the TranslateableAttributes mixin into Ember.View, like:

Ember.View.reopen(Em.I18n.TranslateableAttributes)

and then in your emblem template you can do something like

= input placeholderTranslation="button.add_user.title"