灰燼：將本地化密鑰傳遞給組件模板

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