2

I have a Polymer app with many templates, in which I would like to manage localization. I use app-localize-behavior for that. I found a nice way of managing localization from a single file. The solution proposed there uses behaviors, and requires little additions in each template, with a unique json data file.

My problem is that I would like to be able to change the language dynamically, and probably store it in a app-localstorage-document element, which I manage from another file. How can I set this language property from outside this file?

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

<script>
  MyLocalizeImpl = {
    properties: {
      language: {
        value: 'fr'
      }
    },

    attached: function() {
      this.loadResources(this.resolveUrl('../locales.json'));
    },
  };

  MyLocalize = [MyLocalizeImpl, Polymer.AppLocalizeBehavior]; 
</script>
Community
  • 1
  • 1
Tom
  • 834
  • 1
  • 14
  • 24

1 Answers1

1

OK I adapted the app-localize-behavior demo code. The template which changes the language has to override the language property, including “notify: true”:

  properties: {
    language: {
      value: 'en',
      type: String,
      notify: true
    },
  },

Then I bound all other elements' language property with this:

<element language="{{language}}"></element>

Templates which use localize must of course link the localize script:

<link rel="import" href="localize.html">

… and add the behavior in the script part:

Polymer({
  is: "my-page",

  behaviors: [
    MyLocalize
  ]

Bonus: how to use a different json file for every language: https://abendigo.github.io/2016/08/03/lazyloading_localization.html

Tom
  • 834
  • 1
  • 14
  • 24