app-localize-behavior and shared localization cache

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

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'));
}

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
],

来源：https://stackoverflow.com/questions/37863942/app-localize-behavior-and-shared-localization-cache

标签

localization

polymer