Ember: how to translate placeholder using i18n lib?

Question

See: http://jsfiddle.net/cyclomarc/36VS3/1/

I am using Ember i18n lib for translations. How to use translated string in Ember.TextField view?

We go to view the text field and select a view.

<script type="text/x-handlebars"> <h2>Ember Translate placeholder</h2> {{t T1005}}<br> {{view Ember.TextField placeholder="T1005"}} </script> 

The placeholder in the input field must also indicate "Info" and therefore not "T1005" (which is a link to a string).

Answer 1

You can also do this this way by adding Ember.I18n.TranslateableAttributes mixin to views that need to be knowledgeable about translation, for example:

 Ember.TextField.reopen(Ember.I18n.TranslateableAttributes) 

And then add the suffix Translation to the properties you want to know about translation:

 {{view Ember.TextField placeholderTranslation="T1005"}} 

See updated jsfiddle here.

Hope this helps.

Answer 2

This will work to translate any attribute, not just the placeholder attribute.

Translation File:

 { accounts:{ emailAddress:'Email Address' } } 

Handlebars / Ember Markup :

 {{input type="email" placeholder=(t 'accounts.emailAddress') }} 

Standard marking

 <input name="email" placeholder=(t 'login.email-placeholder')> 

Answer 3

You should Ember.TextField subclass Ember.TextField and add a placeholder as a computed property:

 App.TextField = Ember.TextField.extend({ placeholder : function(){ return Ember.I18n.t("T1005"); }.property() }); 

And use the following in the handlebars template:

 {{view App.TextField}} 

Answer 4

works for me as described here: https://github.com/jamesarosen/ember-i18n/wiki/Doc:-Translating-Text

 <script type="text/x-handlebars"> <h2>Ember Translate placeholder</h2> {{t T1005}}<br> {{view Ember.TextField placeholder=(t "T1005")}} </script>