Internationalization for Ember Paper with Ember-I18n

Ember
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!

Leave a Reply