6

According to the polymer documentation for app-localize-behavior

Each element that displays content to be localized should add Polymer.AppLocalizeBehavior. All of these elements share a common localization cache, so you only need to load translations once.

In the following snippet (adapted from this answer) does not find the shared resources in the tag

Maybe I missed something ?

<!DOCTYPE html>
<html>

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <script src="https://rawgit.com/yahoo/intl-messageformat/d361003/dist/intl-messageformat.min.js"></script>

  <link rel="import" href="polymer/polymer.html">
  <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-local-translate></x-local-translate>

  <dom-module id="x-local-translate">
    <template>

      <div>
        <span title="english"></span>
        <paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
        <span title="french"></span>
      </div>

      <div>
        <h4>Outside Repeater</h4>
        <div>
          <div>{{localize('greeting')}}</div>
        </div>

        <h4>Template Repeater Items</h4>
        <template is="dom-repeat" items="{{things}}">
          <div>{{localize('greeting')}}</div>
        </template>


        <x-local-test></x-local-test>
      </div>
    </template>

    <script>
      Polymer({
        is: "x-local-translate",
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],
        properties: {
          things: {
            type: Array,
            value: function() {
              return [1, 2, 3];
            }
          },

          /* Overriden from AppLocalizeBehavior */
          language: {
            value: 'en',
            type: String
          },

          /* Overriden from AppLocalizeBehavior */
          resources: {
            type: Object,
            value: function() {
              return {
                'en': {
                  'greeting': 'Hello!'
                },
                'fr': {
                  'greeting': 'Bonjour!'
                }
              };
            }
          }
        },
        _toggle: function() {
          this.language = this.$.switch.checked ? 'fr' : 'en';
        }
      });
    </script>
  </dom-module>

  <dom-module id="x-local-test">
    <template>
      <h4>Inside x-local-test</h4>
      <div>{{localize('greeting')}}</div>
    </template>

    <script>
      Polymer({
        is: "x-local-test",
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        properties: {
          things: {
            type: Array,
            value: function() {
              return [1, 2, 3];
            }
          }
        },

      });
    </script>
  </dom-module>

</body>

</html>

Now in the following fiddle, I made it work by passing the resources and language object as x-local-test properties. https://jsfiddle.net/g4evcxzn/2/

But it should work without that

Community
  • 1
  • 1
Jean-Rémi
  • 113
  • 9

2 Answers2

9

According the ideas of Jose A. and Jean-Rémi here some example code for copy/paste:

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/app-localize-behavior/app-localize-behavior.html">

    <script>
      MyLocalizeBehaviorImpl = {
        properties: {
          language: {
            value: 'de'
          }
        },
        attached: function() {
          this.loadResources(this.resolveUrl('locales.json'));
        }
      };
      MyLocalizeBehavior = [MyLocalizeBehaviorImpl, Polymer.AppLocalizeBehavior]; 
    </script>

Include the behavior file in all your custom components and add the behavior:

<link rel="import" href="./my-localize-behavior.html">

......

behaviors: [
    MyLocalizeBehavior
],
AndreasE
  • 434
  • 6
  • 10
6

I took a look at AppLocaleBehavior's demo and if you actually look at the repo, they use two elements for it, one that loads the resources from an external json and one more that has them locally defined and in the demo, the don't seem to be sharing a cache, just as what's happening to you.

This struck me as odd seeing that they do mention the cache, so I took a look at the behavior's code and found out something interesting, the cache actually exists but it seems its purpose is to prevent loading the same external resource multiple times rather than sharing the resources property.

So, if you want to share localization resources on multiple elements the way to go would be having a common resource (let's say we call it locales.json) and call the loadResources function on every one of them (Since the request is cached you don't need to worry about loading the file multiple times). You could do it on the attached callback like this:

attached: function () {
  this.loadResources(this.resolveUrl('locales.json'));
}
Alan Dávalos
  • 2,568
  • 11
  • 19
  • Note that you also have to define a language property: `language: { value: 'en' }` So to have every localized element in the app display the same language, we have to pass down the language to every element. Isn't this an issue ? – Jean-Rémi Jun 17 '16 at 09:00
  • I don't really think it's that big of a problem, I mean, you can actually want different components to be displayed in different languages for whatever reason so you should decide whether you share the language property or not – Alan Dávalos Jun 17 '16 at 16:33
  • 1
    What I ended up doing for tackling that problem was to create a behavior that extended Polymer.AppLocalizationBehavior, in there I grab the resource file and set the language. My application would then include the behavior I just defined and I would avoid setting the language everywhere. – Jose A Aug 01 '16 at 17:10
  • @AlanDávalos actually it is a problem. Now I'm hitting exactly the same issue and I've added the language property everywhere. I don't want to go through all the elements and change the language to all of them for this to work properly. It should work as they documented: add once, localize everywhere. – Lawliet Apr 18 '18 at 18:01