2

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

  <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

4

5 回答 5

2

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

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

<div class="title"> {{title}}</div>
于 2014-06-29T22:25:18.853 回答
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}}在用户更改语言环境后立即自动翻译属性至关重要。

玩得开心 ：）

于 2015-07-20T12:35:51.670 回答
1

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

你会像这样使用一些这样的：

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

这里tv是我用过的助手：

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

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

希望这可以帮助

于 2014-10-30T12:52:29.327 回答
0

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

{{#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.TranslateablePropertiesmixin 更新您的控制器或模型，以允许您绑定已翻译的属性：

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

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

于 2014-06-26T23:15:16.880 回答
0

只是为了更新这里的回复以更新一点！正如@mohamedjahabersadiq 所提到的，您可以使用子表达式。这些在 HTMLBars (>= Ember 1.10.0) 中也可以正常工作。但是，您不必注册新的助手，您可以使用t来自 ember-i18n 的现有助手。

{{#modal-dialog title=(t "dialog.title")}}
    Hello
{{/modal-dialog}}
于 2015-07-23T16:11:53.467 回答