聚合物的本地化？

Question

我打算用Polymer創建一個webapp。 對於該webapp，我需要本地化。 是否有聚合物方式進行本地化？ 有沒有人在Polymer webapp中做過本地化？

Answer 1

I18n和l10n也在我的待辦事項清單上。 目前我正在將一個應用程序從AngularJS移植到Polymer。 后端是Ruby on Rails。 我使用i18n-js gem將Rails轉換文件（en.yml，de.yml等）轉換為一個包含帶有所有翻譯的I18n對象的大型JavaScript文件。 此gem還提供用於執行文本轉換和值本地化的JavaScript庫。 但是還有其他JavaScript庫提供了類似的功能。

當前語言環境是根據HTTP請求的響應設置的，返回用戶Accept-Language標頭。

到目前為止，沒有什么聚合物具體。

然后，我創建了一組全局Polymer表達式過濾器，在其輸入字符串上執行各種語言環境轉換。 這與我學習在AngularJS應用程序中使用的方法相同。 翻譯過濾器如下所示（ I18n.t是JavaScript庫的翻譯功能）

PolymerExpressions.prototype.i18n = function(key) {
  return I18n.t(key);
};

並且像這樣使用

<paper-button label="{{ 'action.help' | i18n }}"></paper-button>

日期本地化可以寫為

{{ someDate | i18n_date('short') }}

我將i18n過濾器和其他輔助函數打包到Polymer元素中，因此我也可以將此元素包含在另一個元素中，並使用其JavaScript代碼中的轉換函數。

i18n元素也包含在我的主app元素中，它初始化I18n庫並設置默認和當前語言環境。

Answer 2

使用Polymer.AppLocalizeBehavior

https://github.com/PolymerElements/app-localize-behavior

我在PWA模板中使用此行為為每個自定義元素的語言環境。

https://github.com/StartPolymer/progressive-web-app-template

Answer 3

不知道Polymer -way在做i18n，我建議做那個服務器端。

如果框架是Spring ，我會將自定義元素實現為jsp，並像往常一樣使用<spring:message />標記處理i18n。

唯一需要注意的是，切換應用程序的語言需要完全重新加載。 但由於語言切換通常不常做，我不認為這是一個問題。

Answer 4

對於Polymer 1.0，我剛剛發布了一個簡單的（大量開發）元素（在gitlab上看到它或在這里閱讀它）。 它異步加載轉換文件，使用非常簡單：

<!-- Import it in head -->
<link rel="import" href="bower_components/quaintous-i18n/quaintous-i18n.html">
<!-- initialize it in body -->
<quaintous-i18n locales-path="/locales/fa.json"></quaintous-i18n>

現在您可以通過各種方式使用它：

• 在計算屬性中：只需添加I18N作為元素行為並轉換數據綁定，例如{{__('hello')}}
• 在全局上下文中只使用I18N對象，例如I18N.__('hello')

Answer 5

我實現了一種不同的方式，即使有AppLocalizeBehavior似乎做得很好。 我創建了一個locale.json文件，其中包含語言列表，需要數據的頁面名稱以及要顯示的數據。

{
"en": {
"loginPage"       : {
  "login"           : "Log in",
  "loginUserid"     : "Enter user id",
  "loginPassword"   : "Enter password"
},
},
"nl": {
"loginPage"       : {
  "login"           : "Log in",
  "loginUserid"     : "Voer gebruikers-ID in",
  "loginPassword"   : "Voer wachtwoord in"
},
},
}

我創建了一個翻譯組件，負責在本地存儲中設置語言（雖然它需要一些重構，我可以使用navigator對象來獲取語言）以及從locale.json獲取數據。 這看起來像這樣：

class Translate extends 
Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
        static get is() { return 'translate'; }


        static get properties() {
            return {
                language: {
                    type: String,
                    value: 'nl',
                    notify: true
                },
                resources: {
                    type: Object,
                    notify: true
                }
            }
        }

        ready() {
            super.ready();
            if (localStorage.length) {
                if (localStorage.getItem('language')) {
                    this.language = localStorage.getItem('language');
                }
                else {
                    localStorage.setItem('language', this.language);
                }
            } else {
                localStorage.setItem('language', this.language);
            }

        }

        attached() {
            this.loadResources(this.resolveUrl('locales.json'));
        }

    }

    window.customElements.define(Translate.is, Translate);

現在，您可以在應用程序的根或應用程序shell中使用此自定義元素

<translate 
class="translate" 
language="{{language}}" 
resources="{{resources}}">
</translate>

將觀察者放在您的資源屬性上並從您的locale.json獲取數據。 現在基於不同的頁面僅傳遞該頁面所需的翻譯值。 page-values是翻譯字符串的值，如下所示：

<login-form 
        title='Login' 
        name="login" 
        page-values="[[pageValues.loginPage]]" 
        login-success="[[_loginSuccess]]"
        api={{apiCollection.login}}></login-form>

希望這可以幫助。

Answer 6

我自己創建了一個實現。 看看我做了什么並不難做到。