ember.js - Ember : Passing localisation key to component template

Question

我有一个模态对话框组件模板，其中包含以下内容

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

因此，我正在使用 ember-i18n [1] 库向 ember 添加本地化功能。现在我从实际的模式对话框模板中调用该组件模板:

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

我在这里想做的是，定义一个用于在对话框模板中进行本地化的键，该键被传递到组件模板并在那里进行翻译。但是，这会导致以下错误:缺少翻译:标题。因此变量标题似乎实际上被视为字符串而不是变量。

或者，我可以翻译对话框模板中的标题并将其传递给组件模板:

对话框:

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

这会导致编译器错误:

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

有什么办法可以实现这一点吗？

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

Answer 1

mitchlloyd 在这里提出了一个很好的解决方案:http://discuss.emberjs.com/t/need-to-pass-a-value-from-component-template-to-component/5792/6

在模板中使用翻译后缀(我只是传递一个标题属性):

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

该组件使用 ember-i18n 中的 Mixin:

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

最后在模板中，只需引用翻译后的标题属性:

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