Geek Answers Handbook

Localization application behavior and shared localization cache

According to polymer documentation for app-localize-behavior

Each element that displays content to be localized must add Polymer.AppLocalizeBehavior. All these elements have a common localization cache , so you only need to download translations once .

In the following snippet (adapted from this answer ) no share was found 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 script, I ran it, passing the resources and language as the properties of x-local-test. https://jsfiddle.net/g4evcxzn/2/

But he must work without it

+6
source share
2 answers

I looked at the AppLocaleBehavior demo , and if you really look at the repo, they use two elements for it: one that loads resources from external json and another that has locally defined and in the demo do not seem to share the cache, like what happening to you.

It seemed strange to me that they mention the cache, so I looked at the behavior code and found out something interesting, the cache actually exists, but it seems that its purpose is to prevent the loading of the same external resource several times, rather than sharing the resources property .

So, if you want to share localization resources on several elements, then the path to it will have a shared resource (suppose we call it locales.json ) and call the loadResources function on each of them (since the request is cached, you do not need to worry about downloading the file several times). You can do this in the attached callback as follows:

 attached: function () { this.loadResources(this.resolveUrl('locales.json')); }
+6
source

Following the ideas of José A. and Jean-Remy, here is an 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 a behavior file in all of your custom components and add behavior:

 <link rel="import" href="./my-localize-behavior.html"> ...... behaviors: [ MyLocalizeBehavior ],
+8
source

More articles:


All Articles