将 {select} 格式 (format.js) 与聚合物应用程序本地化行为一起使用

Question

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

应用程序本地化行为 documentation 说：
"Polymer.AppLocalizeBehavior supports the same message-syntax of format.js, in its entirety;"
但是例如在聚合物文档中，他们将参数作为字符串传递：

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

并且在 format.js 文档中不是：

I have {numCats, number} cats.

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

format.js docs 说要这样使用：

{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"
       }
}

语言默认设置为法语 "fr"，因此我希望得到 "nous" 作为输出，但屏幕上显示的是完整的 {{localize(etc..)}}。

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

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

将不胜感激。

Answer 1

localize 用法

如果 localize 的参数是字符串文字，则必须用引号引起来，如：
```
{{localize('hello', 'Batman')}}
```
否则，它们将被视为属性。例如，如果您有一个包含 Batman 的 name 属性，您将使用：
```
{{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>

codepen

将 {select} 格式 (format.js) 与聚合物应用程序本地化行为一起使用

Use {select} format (format.js) with polymers app-localize-behavior

localization

polymer

messageformat.js

polymer-1.0