Ember: Passing localisation key to component template

Question

I have a modal-dialog component template, which contains the following

  <div class="header">
    {{t title}}
  </div>

So, I am using the ember-i18n [1] library to add localisation to ember. Now I am calling that component template from the actual modal dialog template:

{{#modal-dialog title="dialog.title"}}
  <h3 class="flush--top">I am a modal dialog</h5>
  <button {{action "close"}}>Done</button>
{{/modal-dialog}}

What I am trying to do here is, defining a key that is used for localisation in the dialog template, which is passed to the component template and translated there. However, this leads to the following error: Missing translation: title. So the variable title just seems to actually be treated as a string and not as a variable.

Alternatively I could translate the title in the dialog template and pass it to the component template:

dialog:

{{#modal-dialog title={{t "dialog.title"}} action="close"}}

That leads to a compiler error:

Error: Parse error on line 1:
...#modal-dialog title={{t "dialog.title"}}
-----------------------^
Expecting 'STRING', 'INTEGER', 'BOOLEAN', 'OPEN_SEXPR', 'ID', 'DATA', got 'OPEN'

Is there any way to make this happen?

[1] https://github.com/jamesarosen/ember-i18n

Answer 1

mitchlloyd presented a great solution here: http://discuss.emberjs.com/t/need-to-pass-a-value-from-component-template-to-component/5792/6

Use the Translation suffix in the template (I was just passing a title property):

{{#modal-dialog action="close" titleTranslation="modal.title"}}
  <h3 class="flush--top">Name Change Modal</h5>
{{/modal-dialog}}

The component uses the Mixin from ember-i18n:

export default Ember.Component.extend(Em.I18n.TranslateableProperties, {
}); 

And finally in the template, just reference the translated title property:

<div class="title"> {{title}}</div>