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
1 | {{t "user.edit.title"}} |
but what if you want to use these two great add-ons together? For example in a button ?
1 2 3 | {{#paper-button onClick=(action "flatButton")}} Button with action {{/paper-button}} |
or input?
1 2 3 4 5 6 7 8 9 | {{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):
1 2 3 | {{#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:
1 | label=(t "templateName.label.address") |
and the customize error message can be handled in a similar fashion:
1 2 3 | errorMessages=(hash required=(t "templateName.label.addressRequired") ) |
putting it all together the code would look like :
1 2 3 4 5 6 7 8 9 | {{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 :
1 | paperRequiredErrMsg: t ("paper.required"), |
and used like this:
1 2 3 | 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!