CODEWITHSUNDEEP
localizationpolymerpolymer-1.0messageformat.js
Getter Jetter
Getter Jetter

Reputation: 2081

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

I'm doing some trials with Polymers app-localize-behavior, and I'm having a hard time to find some clear documentation regarding how to use format.js's {select} Format found here.

The app-localization-behavior documentation says :
"Polymer.AppLocalizeBehavior supports the same message-syntax of format.js, in its entirety;"
But for example in the polymer docs they pass the arguments as strings: 

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

and in format.js docs not:

I have {numCats, number} cats.

Now the issue I'm facing is how to use the {select} Format.

The format.js docs says to use it like this:

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

so I did this in my template: 

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

locales.json : 

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

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

The language is set by default to french "fr", so I expect to get "nous" as output, but instead the full {{localize(etc..)}} is displayed on screen.

The last I did, was trying to pass everything as string or just some of the arguments (all combinations) but this all doesn't helps.

Did anyone faced the same issue or can somebody explain what I'm doing wrong here pls?

Help would be greatly appreciated.

Upvotes: 0

Views: 1042

Answers (1)

tony19
tony19

Reputation: 138266

localize usage

  • The arguments to localize must be quoted if they're string literals, as in:

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

    Otherwise, they're treated as properties. For example, if you had a name property that contained Batman, you would use:

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

  • The first localize argument is a key into the language dictionary (defined either in your element's resources property, or in an external file loaded by your element, such as locales.json)

  • All localize arguments after the first are passed directly to intl-messageformat.

This string:

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

...is a message format, which must be defined as a value in the language dictionary. This example shows the dictionary defined in a resources property with a key of 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.` }
        }
      }
    }
  }
});

Then, in your element's template, you would use localize as follows:

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

where:

  • 'response': the lookup key into the language dictionary
  • 'gender': the key of the {select}
  • 'female': the selector of the {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

Upvotes: 2

Related Questions