polymer-global-variables v1.1.0
Polymer Global Variables
Share variables across all the polymer elements in your Polymer 1.x application.
The Polymer 1.x data system have great and powerful tools (Data bindings, observers,...) but sometimes it feels very repetitive to passing the same data to almost every element you declare (e.g., localization, authentication flags,...).
This hack tries to solve this issue setting a global object in every Polymer component instance of your project.
Use it instead repetitive declarations of components, binding the same data in every child element or using the same behaviour in every component you make.
You can see an example of usage in this repo. It implements a localization solution with this hack.
Install
With bower do:
$ bower install --save polymer-global-variables
Import the polymer-global-variables.js
or polymer-global-variables.min.js
file in your project main file:
index.html
<script src="bower_components/polymer-global-variables/dist/polymer-global-variables.js" charset="utf-8"></script>
Usage
Now you have access to Polymer.globalsManager
, use set()
method to make changes in the globals object.
Polymer.globalsManager.set('myGlobalVariable', {foo: 'bar'});
Polymer.globalsManager.set('anotherGlobalVariable', 'foo');
This changes will be reflected in every component instance on your project:
any-component.html
...
<template>
<div>
<div>1</div>
<h1>[[globals.myGlobalVariable.foo]]</h1>
<p>[[globals.anotherGlobalVariable]]</p>
</div>
</template>
...
See an example in this this repo.
Ignoring global properties
If you need to ignore global properties and their changes in some specific component you can add a ignoreGlobalProperties
flag to the component:
any-other-component.html
properties: {
ignoreGlobalProperties: {
type: Boolean,
value: true
}
}
Polymer.globalsManager API
set(variableToSet:string, value:any)
Sets a global variable in every element in the app.
Example:
Polymer.globalsManager.set('myGlobalVariable', {foo: 'bar'});
get(variableName:string)
Get a global variable reference.
Example:
Polymer.globalsManager.get('myGlobalVariable');
// { foo: 'bar' }
getAll()
Get all global variables object.
Example:
Polymer.globalsManager.getAll();
// { myGlobalVariable: { foo: 'bar'}, myOtherGlobalVariable: 'yep' }
License
MIT © ivanrod.