Patterns: How to support global variables

[ebidel]

We have http://www.polymer-project.org/docs/polymer/polymer.html#static that talks about static vars. Expanding on this:

MonoState Pattern for this. When defining Polymer element, define a closure that closes over the variables in question, and then provide accessors on the object's prototype or copy them over to individual instances in the constructor.

<polymer-element name="app-globals">
  <script>
  (function() {
    var borderColor = '#d6d6d6';
    var textColor = '#222';
    var easingCurve = 'cubic-bezier(0,0,.3,1)';

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

Then use the element as you would any other, and data-bind it to a property that you can use to access it through Polymer's normal model-driven views templating:

<polymer-element name="my-component">
  <template>
    <style>
      #box {
        border-color: {{globals.borderColor}};
        color: {{globals.textColor}};
      }
      #tagline {
        color: {{globals.faintColor}};
      }
    </style>
    <app-globals id="globals"></app-globals>
    <div id="box"></div>
    <div id="tagline"></div>
  </template>
  <script>
    Polymer('my-component', {
      ready: function() { this.globals = this.$.globals; }
     });
  </script>
</polymer-element>

(The Shadow DOM polyfill currently has issues with data-binding in <style> tags, but it should work under native Shadow DOM.)

A slight tweak of this approach will let you configure the value of the globals externally:

<polymer-element name="app-globals">
  <script>
  (function() {
    var values = {};

    Polymer('app-globals', {
       ready: function() {
         for (var i = 0; i < this.attributes.length; ++i) {
           var attr = this.attributes[i];
           values[attr.nodeName] = attr.nodeValue;
         }
       }
    });
  })();
</polymer-element>

In the main page (not in any component):

<app-globals
  borderColor="#d6d6d6"
  faintColor="#777"
  textColor="#222"
  easingCurve="cubic-bezier(0,0,.3,1)">
</app-globals>

Usage within components would be the same - we're just changing how the values are defined, not how they're used.

[robdodson]

Here's a jsbin for the first approach:
http://jsbin.com/yobed/8/edit

And here's my attempt at the second:
http://jsbin.com/nimer/2/edit
note that attributes are forced to lowercase, so passing them to app-globals as camel case is probably an antipattern

Neither approach seems to work in stable.

[robdodson]

@eee-c might be interested in this

[sorvell]

Bindings within <style> elements don't work out of the box with the shimmed
styles that are created when the ShadowDOM polyfill is used.

Binding to style seems unnecessary to demonstrate passing data around like
this. I'd recommend some other sample usage of the data.

On Tue, Mar 11, 2014 at 10:43 AM, Rob Dodson notifications@github.comwrote:

@eee-c https://github.com/eee-c might be interested in this

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/318#issuecomment-37326144
.

[ebidel]

I've also seen Polymer.mixin. Would be nice to know more about that.

[sorvell]

Platform.mixin(a, b);

mixes the properties in object b into object a.

On Tue, Mar 11, 2014 at 11:30 AM, Eric Bidelman notifications@github.comwrote:

I've also seen Polymer.mixin. Would be nice to know more about that.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/318#issuecomment-37332061
.

[ebidel]

This landed. #334 is improving on the existing docs.

[jlebrech]

Is there a way to add the tag just once at a higher level, rather than including it in each template?