Closed albertolobrano closed 10 years ago
Another nice trick I found while facing the same problem is creating an initializer which runs after the ember-forms initializer. This initializer takes the ember-form components and extends them with I18n.TranslateableProperties
. You can then use translations like this:
{{em-input property="description" labelTranslation='projects.description' placeholderTranslation='projects.placeholder.description'}}
Here is my initializer for it:
initialize = (container) ->
FormInputComponent = container.registry['component:em-input']
FormSelectComponent = container.registry['component:em-select']
FormCheckboxComponent = container.registry['component:em-checkbox']
FormTextComponent = container.registry['component:em-text']
FormInputTranslatedComponent = FormInputComponent.extend Ember.I18n.TranslateableProperties
FormSelectTranslatedComponent = FormSelectComponent.extend Ember.I18n.TranslateableProperties
FormCheckboxTranslatedComponent = FormCheckboxComponent.extend Ember.I18n.TranslateableProperties
FormTextTranslatedComponent = FormTextComponent.extend Ember.I18n.TranslateableProperties
# register components with I18n extension again
container.register 'component:em-input', FormInputTranslatedComponent
container.register 'component:em-select', FormSelectTranslatedComponent
container.register 'component:em-checkbox', FormCheckboxTranslatedComponent
container.register 'component:em-text', FormTextTranslatedComponent
TranslatedFormsInitializer =
name: 'translated-forms'
after: 'ember-forms'
initialize: initialize
Just pass the translated values to titles, if you use ember-validations for validations, then it supports i18n out of the box.