0

我正在使用 Polymers app-localize-behavior 进行一些试验，我很难找到一些关于如何使用 format.js 的 {select} 格式的清晰文档。

app-localization-behavior文档说：
“Polymer.AppLocalizeBehavior 完全支持与 format.js 相同的消息语法；”
但是例如在聚合物文档中，他们将参数作为字符串传递：

{{localize('hello', 'Batman')}}

在 format.js 文档中不是：

I have {numCats, number} cats.

现在我面临的问题是如何使用 {select} 格式。

format.js文档说要像这样使用它：

{gender, select,
male {He}
female {She}
other {They}
} will respond shortly.

所以我在我的模板中这样做了：

{{localize(wir, select,
            wir {we}
            ich {i}
           )
}}

locales.json ：

{
"en" : {
         "i" : "I",
         "we" : "we"        
       },
"fr" : { 

         "i" : "je",
         "we" : "nous"
       },
"de" : {
         "i" : "ich",
         "we" : "wir"
       }
}

语言默认设置为 french "fr"，所以我希望得到“nous”作为输出，而不是完整的{{localize(etc..)}}显示在屏幕上。

我最后一次尝试将所有内容作为字符串或只是一些参数（所有组合）传递，但这一切都无济于事。

有没有人遇到过同样的问题，或者有人可以解释一下我在这里做错了什么吗？

帮助将不胜感激。

4

1 回答 1

2

localize用法

  • 如果参数localize是字符串文字，则必须引用它们，如：

    {{localize('hello', 'Batman')}}

    否则，它们将被视为属性。例如，如果您有一个name包含 的属性Batman，您将使用：

    {{localize('hello', name)}}

  • 第一个localize参数是语言字典的键（在元素的resources属性中定义，或者在元素加载的外部文件中定义，例如locales.json）

  • 第一个之后的所有localize参数都直接传递给intl-messageformat.

这个字符串：

{gender, select,
male {He}
female {She}
other {They}
} will respond shortly.

...是一种消息格式，必须在语言字典中定义为一个值。此示例显示了在resources属性中定义的字典，其键为response：

Polymer({
  ...
  properties: {
    resources: {
      value: function() {
        return {
          'en': { 'response': `{gender, select,
                                male {He}
                                female {She}
                                } will respond shortly.` },
          'fr': { 'response': `{gender, select,
                                male {Il}
                                female {Elle}
                                } répondra prochainement.` }
        }
      }
    }
  }
});

然后，在元素的模板中，您将使用localize如下：

<div>Message: {{localize('response', 'gender', 'female')}}</div>

在哪里：

  • 'response'：语言字典中的查找键
  • 'gender': 的关键{select}
  • 'female': 的选择器{select}

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">

  <!-- Polygit can't find intl-messageformat.min.js, so we're importing
       it here for app-localize-behavior. Don't use this in your apps! -->
  <script src="https://rawgit.com/yahoo/intl-messageformat/v1.3.0/dist/intl-messageformat-with-locales.min.js"></script>

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-toggle-button/paper-toggle-button.html">
  <link rel="import" href="app-localize-behavior/app-localize-behavior.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <paper-toggle-button on-change="_switchLanguage">Language: {{language}}</paper-toggle-button>
      <paper-toggle-button on-change="_switchGender">Gender: {{gender}}</paper-toggle-button>
      <div>Message: {{localize('response', 'gender', gender)}}</div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          behaviors: [
            Polymer.AppLocalizeBehavior
          ],
          properties: {
            gender: {
              type: String,
              value: "male"
            },
            language: {
              value: 'en'
            },
            resources: {
              value: function() {
                return {
                  'en': {
                    'response': "{gender, select,\
                                  male {He}\
                                  female {She}\
                                  } will respond shortly."
                  },
                  'fr': {
                    'response': "{gender, select,\
                                  male {Il}\
                                  female {Elle}\
                                  } répondra prochainement."
                  }
                }
              }
            }
          },
          _switchGender: function() {
            this.gender = this.gender === 'male' ? 'female' : 'male';
          },
          _switchLanguage: function() {
            this.language = this.language === 'fr' ? 'en' : 'fr';
          }
        });
      });
    </script>
  </dom-module>
</body>

密码笔

于 2016-06-20T11:43:27.833 回答