Ember Paper is a Ember add-on which allows for the building of designs using Google’s Material Design language.
Ember-i18n is a Ember add-on for Internationalization (i18n).
the normal process of translating text in a ember handbar (.hbs) is {{t "user.edit.title"}}
but what if you want to use these two great add-ons together? For example in a button ?
{{#paper-button onClick=(action "flatButton")}}
Button with action
{{/paper-button}}
or input?
{{paper-input
label="Address"
value=address
onChange=(action (mut address))
required=true
errorMessages=(hash
required="Address is required."
)
}}
the button use case is trivially simple (assuming your translation keys are all setup 🙂 ), in that you use the ember-i18n translation macro as usual for any block version of a ember-paper component element (or any block version of a handlebar element):
{{#paper-button onClick=(action "flatButton")}}
{{t "templateName.button.title"}}
{{/paper-button}}
that’s all well and good, but want of blockless elements? In the case of the paper-input the label can be ‘translated’ thusly:
label=(t "templateName.label.address")
and the customize error message can be handled in a similar fashion:
errorMessages=(hash
required=(t "templateName.label.addressRequired")
)
putting it all together the code would look like :
{{paper-input
label=(t "templateName.label.address")
value=address
onChange=(action (mut address))
required=true
errorMessages=(hash
required=(t "templateName.label.addressRequired")
)
}}
There is one other non-trivial case to handle for when neither the helper nor the macro works for your use-case and you want to use the value of a computed property, you can use the i18n service directly, so :
paperRequiredErrMsg: t ("paper.required"),
and used like this:
errorMessages=(hash
required=(get paperRequiredErrMsg "string")
)
Voilà ! (which is french for “Ian thinks he is so much more clever than he actually is”) Many thanks to Miguel Andrade!