Polymer.AppLocalizeBehaviorは、アプリケーションの国際化をサポートするformat.jsライブラリをラップしています。Intlオブジェクトをネイティブにサポートしていないブラウザを使用している場合は、**自分でポリフィルを読み込む必要があります。**polyfillの利用例は、github.com/andyearnshaw/Intl.jsを参照してください。

Polymer.AppLocalizeBehaviorは、format.jsとまったく同じメッセージ構文をサポートしています。利用可能なメッセージ形式とオプションのリファレンスはformat.jsライブラリのドキュメントを参照してください。

コンテンツをローカライズして表示するエレメントには、それぞれPolymer.AppLocalizeBehaviorを追加する必要があります。これらのエレメントはすべて共通のローカリゼーションキャッシュを共有しており、翻訳は一度読む込むだけで済みます。

Polymer 1.xエレメントとPolymer 2.xのハイブリッドエレメントでは、AppLocalizeBehaviorを直接使用できます。クラススタイルのエレメントの場合は、mixinBehaviorsメソッドを使用します。.

bower install --save PolymerElements/app-localize-behavior

通常、メインアプリケーションが、ローカライズされたメッセージのロードと言語環境の設定を担います。

サンプルアプリケーション(クラススタイルエレメント)

<dom-module id="x-app">
  <template>
    <!-- use the localize method to localize text -->
    <div>{{localize('hello', 'name', 'Batman')}}</div>
  </template>
  <script>
    class XApp extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
      static get is() { return 'x-app'}

      static get properties() {
        return {
          // set the current language—shared across all elements in the app
          // that use AppLocalizeBehavior
          language: {
            value: 'en'
          },

          // Initialize locale data
          resources: {
            value() {
              return {
                'en': { 'hello': 'My name is {name}.' },
                'fr': { 'hello': 'Je m\'apelle {name}.' }
              }
            }
          }
        };
      }
    }

    customElements.define(XApp.is, XApp);
  </script>
</dom-module>

一般的には、次の例に示すように、アプリケーションは外部ファイルからリソースをロードします。

サンプルアプリケーション(ハイブリッドエレメント)

<dom-module id="x-app">
   <template>
    <!-- use the localize method to localize text -->
    <div>{{localize('hello', 'name', 'Batman')}}</div>
   </template>
   <script>
      Polymer({
        is: "x-app",

        // include the behavior
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        // set the current language—shared across all elements in the app
        // that use AppLocalizeBehavior
        properties: {
          language: {
            value: 'en'
          },
        }

        // load localized messages
        attached: function() {
          this.loadResources(this.resolveUrl('locales.json'));
        },
      });
   </script>
</dom-module>

メインアプリケーションは、ポリフィルIntlの読み込みも担います。(上記には示されていません)

メッセージをローカライズする必要があるエレメントには、それぞれPolymer.AppLocalizeBehaviorを追加し、上記のようにlocalizeメソッドを使用して文字列を変換する必要があります。