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?

Alexander Wallace Matchneer · Answer 1 · 2013-07-22T20:17:14.433

3

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"

edited Jul 22 '13 at 20:17

answered Jul 22 '13 at 16:07

Alexander Wallace Matchneer

3,289
1
23
26

Thanks for clarifying. For now I'll hardcode the placeholders and hope the ember team implements a way to nest helpers. – nullnullnull Jul 22 '13 at 19:03
I added some alternatives you can use to the answer. – Alexander Wallace Matchneer Jul 22 '13 at 20:17

score 3 · Accepted Answer · answered Mar 03 '14 at 11:10

3

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'),

answered Mar 03 '14 at 11:10

wuher

1,629
15
12

Brilliant. Far more elegant than the solution I'd been using. – nullnullnull Mar 03 '14 at 15:53
The controller is not really a good place to add those things. You should create a view for that. – Roberto Decurnex May 02 '15 at 06:48

score 1 · Answer 3 · answered Jul 21 '13 at 05:31

1

I noticed a typo in the first placeholder="#{t 'users.attributes.username}". It's missing the closing single quote.

The Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found. can be misleading. I've found that the error is somewhere else entirely to what was being reported. For instance, linkTo without a | for plain text reports a similar error.

answered Jul 21 '13 at 05:31

Darshan Sawardekar

5,065
2
21
31

Solid advice. I'm new to ember.js, and pointers like this will help out a lot over the long run. Unfortunately, at the moment the error still seems tied to the placeholders. When I remove that code, the page renders fine. With it there, I get the errors. This continues even when I add the closing quotation mark. – nullnullnull Jul 21 '13 at 16:09
Not sure what else I can suggest. Try adding an issue at the [repo](https://github.com/machty/emblem.js/issues), @machty might be able to help. – Darshan Sawardekar Jul 22 '13 at 02:48

score 0 · Answer 4 · answered May 02 '15 at 06:58

You should use the views to format things and drop them into the template. Controllers are not meant to know what happens at the template.

You would also want that to be a property, so i18n will work just once and then you can use the cache version.

Templete:

{{input value=view.username placeholder=view.usernamePlaceholder}}
{{input value=view.password placeholder=view.passwordPlaceholder type="password"}}

View:

export default Ember.View.extend({

  usernamePlaceholder: function() { 
    return Ember.I18n.t('users.attributes.username');
  }.property(),

  passwordPlaceholder: function() { 
    return Ember.I18n.t('users.attributes.password');
  }.property()

});

Inserting a translation into a placeholder with Emblem.js

4 Answers4

Linked