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

在模板中使用翻译后缀（我只是传递了一个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, {
});

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

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

Answer 2

以上解释不适用于最新版本的ember-i18n，其中TranslateableProperties has been removed：

以下是我如何使用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 doc中所述使用 i18n.locale对于确保在用户更改区域设置后自动翻译属性{{title}}至关重要。

玩得开心：）

Answer 3

更好的方法是使用Handlebars Subexpressions：

您可以使用以下内容：

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

这里 tv 是我使用的帮手：

你需要为此注册一个帮手：

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

希望这有帮助

Answer 4

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

{{#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属性中它应该有用。你可以把它放在你的对话框模型中，或者你可以将它放到你的项目控制器或你正在使用的任何内容中。

UPDATE ::

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

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

祝你好运，希望有所帮助！

Answer 5

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

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

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

5 个答案: