i18nを使ってhtmlページの一部のみを翻訳する方法

Question

i18n libを使ってページ（モジュール）の一部のみを翻訳するロジックを構築しようとしています。

私は言語を変更したときにページ上の言語を変更するようにi18nをグローバルに設定しましたが、そのページで（電子メール用のプレビューのような）1つのモジュールを別の言語でいくつかのドロップダウンフィールド。どのようなスコープのi18nのように。

私はaurelia-i18n 1.4.0バージョンを使用しています。

<span t="messages.hello_message">hello<span>を設定すると、グローバルとは異なるローカルモジュールの変更を監視することができますが、グローバルと同じ変換ファイルを再度使用することができます。

誰かに似たような問題や考えがありましたか？ありがとう。 :)

Answer 1

あなたはそれを箱から出すことはできません。 setLocaleを使用してアクティブなロケールを変更すると、このメソッドはイベントを発生させ、バインディング動作の更新を通知しますhttps://github.com/aurelia/i18n/blob/master/src/i18n.js#L54。 TCustomAttributeはこれらの変更をリッスンし、バインドを自動的に再送出します。ただし、ここではhttps://github.com/aurelia/i18n/blob/master/src/t.jsのように独自のカスタム属性を作成し、変換の更新が行われるときの条件を定義するbindメソッドとunbindメソッドをオーバーライドします。例と

---更新---

[OK]をので、ここで、私が考えていたものを、小さな例です素敵な方法ではないかもしれませんが、それはそれを行う必要があります。あなたのmain.jsで

は今ファイルを作成foo-custom-attribute.js

import {TCustomAttribute} from 'aurelia-i18n'; 
import {customAttribute} from 'aurelia-framework'; 

@customAttribute('foo') 
export class FooCustomAttribute extends TCustomAttribute { 
    constructor(element, i18n, ea, tparams) { 
    super(element, i18n, ea, tparams); 
    } 

    bind() { 
    this.params = this.lazyParams(); 

    if (this.params) { 
     this.params.valueChanged = (newParams, oldParams) => { 
     this.paramsChanged(this.value, newParams, oldParams); 
     }; 
    } 

    let p = this.params !== null ? this.params.value : undefined; 
    this.service.updateValue(this.element, this.value, p); 
    } 

    unbind() {} 
} 

新しいglobalResources

export function configure(aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .plugin('aurelia-i18n', (instance) => { 
     ... 
    }) 
    .globalResources("./foo-custom-attribute") // <-- this here 

を追加これは、本質的に/ TCustomAttributeを拡張fooと呼ばれる新しい属性を作成してバインドを無効にしますシグナリングを除外し、言語変更されたイベントをリスンするメソッドのバインドを解除します。あなたは今、今言語を切り替える

<span t="demo"></span> 
<span foo="demo"></span> 

を使用することができ、あなたのビューで

は、いつものようにt属性を変更しますが、それはあるようfooを維持します。