I followed the documentation at https://www.polymer-project.org/0.5/docs/polymer/polymer.html#global and learnt about the global variables that can be shared across all the instances of a given component. I would like to go a step further. Would like to have the global variable to be reactive. Meaning if its value is changed by one of the instances, it should propagate through all other instances.
<dom-module is="my-writer">
<template>
<my-global user="{{username}}"></my-global>
<button on-click="changeName">Change</button>
</template>
<script>
Polymer({
is: 'my-writer',
changeName: function() { this.username = 'abhilash'; }
});
</script>
</dom-module>
<dom-module is="my-reader">
<template>
<my-global user="{{username}}"></my-global>
<span>{{username}}</span>
</template>
<script>
Polymer({
is: 'my-reader',
properties: {
username: { type: String, notify: true, value: 'goje' }
}
});
</script>
</dom-module>
<my-writer></my-writer>
<my-reader></my-reader>
This code would show a button and a span with value as 'goje'. And when I click button, I would want the span to change to show 'abhilash'.
