Shared Polymer Behaviour Properties

Question

I'm trying to work out what is going on with Polymer Behaviours. Specifically, I am using the app-localize-behavior. From what I can gather the properties are shared unless the value is defined as a function.

I have added the app-localize-behavior to two elements. I have input boxes linked to the language property in app-localize-behavior to test out changing the property. So in element 1 I change the property to en and the translation in that element works but element 2 does nothing. I change the language via the input on element 2 and then that translates fine.

What I can't understand is I thought since the property was in the behaviour, then changing the property in one element changed the other element.

It seems a little useless to have an app-localize-behavior that doesn't reflect some global setting but lots of local settings for the language.

Here is the code used in both elements.

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

<input is="iron-input" bind-value="{{language}}">

<h1>{{localize('Matters')}}</h1>

...

  behaviors: [
    Polymer.AppLocalizeBehavior
  ],

  properties: {
    resources: {
      value: function() {
        return {
          'en': { 'Matters': 'English Matter'},
          'fr': { 'Matters': 'French Matter'}
        }
      }
    }
  },
...

Can anyone help?

Answer 1

From my understanding, the is going to find the property "language" in your element and bind it as the selected language. It's not sharing or storing the property language across the app.

Behaviors should be used to create shareable input/output operation; In the current situation, I belive you need to store the user language and let do everything else.

• Declare the property in your main view (my-app.html).
• The input probably going to be a drop-down menu in your navigation bar.
• Bind the language value to all other views of your app.

• The language property should have a default value like "en".

      properties: {
        language: {
          value: 'en'
        },
      }
  

my-app.html

<my-view1 language="[[language]]" name="view1"></my-view1>

my-view1.html

   <script>
      Polymer({
        is: "x-app",

        // include the behavior
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        // set the current language—shared across all elements in the app
        // that use AppLocalizeBehavior
        properties: {
          language: {
            value: 'en'
          },
        }

        // load localized messages
        attached: function() {
          this.loadResources(this.resolveUrl('locales.json'));
        },
      });
   </script>