Polymer global variables

Question

I'm working on a Polymer app, which is pulling data from a RESTful API and using it to construct the interface. A specific area I'm stuck on conceptually is the implementation of the Monostate Pattern described at http://www.polymer-project.org/docs/polymer/polymer.html#global . Effectively, I can add declarative attributes into a new component, app-globals, and then access this reasonably straightforwardly.

Here's the key question: if I'm pulling (and, potentially, resubmitting) data back and forth via core-ajax to the API within the app-globals component, how do I ensure that all consumers of the app-globals component have the same data? Seems like I've lost my monostatism if I use the suggested pattern:

<polymer-element name="my-component">
  <template>
    <app-globals id="globals"></app-globals>
    <div id="firstname"></div>
    <div id="lastname"></div>
  </template>
  <script>
    Polymer('my-component', {
      ready: function() { this.globals = this.$.globals; }
     });
  </script>
</polymer-element>    

because each of the components that consume app-globals will be pulling their own version of the API data. Am I missing something? Is there another way to ensure that the app constantly has only one version of the truth?

Answer 1

Each time you reference app-globals in a custom component, a new instance of app-globals is created. But each of these instances can share a number of properties (think "static" vars in Java or "class" vars in ObjC / Swift).

The Script within app-globals element (or indeed any Polymer element) runs only once - think of it as running when the component definition is loaded. But the Polymer function within that script declares a configuration object, with properties and lifecycle event-handlers, that will be created separately for each instance. The app-globals script in the document you reference (copied below UPDATE: this version is modified as described later) uses an anonymous closure (a function that is run immediately), containing both the shared variables and the Polymer function declaring the config object which in turn references the shared variables. So each instance of that config object - and in turn each instance of app-globals - will reference the same set of shared variables.

 <polymer-element name="app-globals">
  <script>
  (function() {
    var data = {
      firstName: 'John',
      lastName: 'Smith'
    }

    Polymer('app-globals', {
       ready: function() {
         this.data = data;
       }
    });
  })();
  </script>
</polymer-element>

If one custom component instance changes a value on its app-globals instance (or they are changed internally, as the results of an AJAX call in your case) all other component instances with a reference to app-globals will see the changed value.

UPDATE: The original, as copied from:

http://www.polymer-project.org/docs/polymer/polymer.html#global

had a deficiency, as described by @zreptil, if you change the data values, the new values are NOT available to all other instances - because the instance variables are just copies of the referenced strings. By using an object with data properties, as in the edited version above, and only ever reading from and assigning to the data properties of that object rather than overwriting the object itself, changed values are shareable between instances.

Answer 2

@Zreptil has asked for an example above, and since I had to experiment with this anyway I built one based on Tim Stewart's answer and the Polymer documentation.

Complete Example: http://jsbin.com/figizaxihe/1/edit?html,output

I had some troubles with dashes in the id ( id="global-variable" ) so I also added an example for that.

The element definition

<polymer-element name="app-globals">
<script>
  (function() {
    var data = {
      firstName: 'John'
    }

    Polymer({
       ready: function() {
         this.data = data;
       }
    });
  })();

</script>
</polymer-element>

Use it inside a polymer element

<polymer-element name="output-element" noscript>
<template>
    <app-globals id="globalvars"></app-globals>
    <h4>Output-Element</h4>
    <div>First Name: {{$.globalvars.data.firstName}}</div>
</template>
</polymer-element>

Use it outside a polymer element

<template is="auto-binding">
    <app-globals id="topglobals"></app-globals>
    <h3>First Name in Title: {{$.topglobals.data.firstName}}</h3>
</template>

Pay attention with dashes/hyphens

  <h3>and since that took me a while to realize - dashes are not directly supported...</h3>
<template is="auto-binding">
    <!-- can use different id's -->
    <app-globals id="global-variables"></app-globals>
    <div>This does not work: {{$.global-variables.data.firstName}}</div>
    <div>Correct syntax: {{$['global-variables'].data.firstName}}</div>

</template>

Polymer 1.0

See Polymer 1.0 Global Variables for a polymer 1.0 solution if interested.