灰烬：将本地化密钥传递给组件模板

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}}

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

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

对话：

{{#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

在模板中使用Translation后缀（我只是传递title属性）：

{{#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, {
}); 

最后在模板中，只需引用翻译后的title属性：

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

Answer 2

以上说明不适用于已删除 TranslateableProperties的最新版本的ember-i18n：

这是我如何使用ember-i18n 4.x和ember-cli 1.13.1进行工作：

1-确保将服务i18n注入您的组件中：

//initializers/i18n.js
export default {
  name: 'i18n',

  after: 'ember-i18n',

  initialize: function(_, app) {
      app.inject('controller', 'i18n', 'service:i18n');
      app.inject('component', 'i18n', 'service:i18n');
  }
};

2-组件的模板引用了{{title}}属性：

//templates/components/pick-card.hbs
!-- Selection of the card -->
<div class="row" style="margin-top: 40px;">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1 class="panel-title">{{title}}</h1>
            </div>
...

3-我在其中调用组件的模板：

//templates/security/forgot-username.hbs
{{#pick-card title-i18n="page.forgot_username"}}
{{/pick-card}}

4-组件的控制器的魅力在于：

    import Ember from 'ember';
    import {translationMacro as t} from "ember-i18n";

    export default Ember.Component.extend({
      title: Ember.computed('i18n.locale', function() {
          return this.get('i18n').t(this.get('title-i18n'));
      })
    });

如ember-i18n文档中所述，使用i18n.locale对于确保用户更改语言环境后立即自动转换属性{{title}}至关重要。

玩得开心 ：）

Answer 3

更好的方法是使用Handlebars子表达式：

您可以这样使用：

{{#modal-dialog title=(tv "dialog.title") action="close"}}

电视是我使用过的助手：

并且您需要为此注册一个助手：

Ember.Handlebars.registerHelper('tv', function (key) {
  return Em.I18n.t(key);
});

希望这可以帮助

Answer 4

您可以在控制器或模型中计算标题属性。 所以：

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

将会：

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

然后，您可以具有如下所示的计算属性：

translateTitle: function () {
  return this.translateLibraryMethodYouUse(this.get('title'));
}.property('title') 

显然，这是伪代码，但是如果您可以将本地化转换为translateTitle属性，则它应该可以工作。 您可以将其放在对话框模型中，也可以将其放入项目控制器或用于该上下文的任何对象。

更新::

好吧，所以看看那个图书馆。 您还可以尝试使用Em.I18n.TranslateableProperties mixin更新控制器或模型，以使您可以绑定翻译后的属性：

App.DialogController = Ember.ObjectController.extend(Em.I18n.TranslateableProperties, {
  titleTranslation: 'dialog.title'
});

祝您好运，希望对您有所帮助！

Answer 5

只是为了更新此处的回复，使其更新一些！ 如@mohamedjahabersadiq所述，您可以使用Subexpressions。 这些在HTMLBars（> = Ember 1.10.0）中也可以正常工作。 但是，您不必注册新的帮助程序，可以使用ember-i18n中现有的t帮助程序。

{{#modal-dialog title=(t "dialog.title")}}
    Hello
{{/modal-dialog}}