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. そのため、変数 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

上記の説明は、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 docで説明されているように、ユーザーがロケールを変更するとすぐにi18n.localeプロパティが自動的に翻訳されるようにするためには、 の使用 が重要です。{{title}}

楽しむ ：）

于 2015-07-20T12:35:51.670 に答える
2

mitchlloyd はここで優れたソリューションを提示しました: http://discuss.emberjs.com/t/need-to-pass-a-value-from-component-template-to-component/5792/6

テンプレートで Translation サフィックスを使用します (タイトル プロパティを渡しただけです)。

{{#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 に答える
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 に答える