Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!-- Demo on how to implement global variables with Polymer 1.0 -->
​
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
​
​
<!-- Originally based on http://stackoverflow.com/questions/30849816/polymer-1-0-global-variables -->
<dom-module id="app-data">
</dom-module>
<script>
    (function () {
        var instances = [];
        var vars = Object.create(Polymer.Base);
    
        Polymer({
            is: 'app-data',
            properties: {
               data: {
                    type: Object,
                    value: '',
                    notify: true,
                    readonly: false,
                    observer: '_data_changed'
                },
              key: String
            },
            created: function () {
              key = this.getAttribute('key');
              if (!key){
                console.log(this);
                throw('app-data element requires key');
              }
​
              instances.push({key:key, instance:this});
            },
​
            detached: function () {
                key = this.getAttribute('key');
                var i = instances.indexOf({key:key, instance:this});
                if (i >= 0) {
                    instances.splice(i, 1);
                }
            },
          
          _data_changed: function (newvalue, oldvalue) {
            key = this.getAttribute('key');
            if (!key){
                throw('_data_changed: app-data element requires key');
                }
            vars.set(key, newvalue);
​
            // notify the instances with the correct key
            for (var i = 0; i < instances.length; i++) 
            {
              if(instances[i].key == key)
              {
                instances[i].instance.notifyPath('data', newvalue);
              }
            }
          }
        
            
        });
    })();
</script>
​
​
<!-- Usage example -->
​
​
<!-- Element definitions -->
​
<!-- Input Element -->
<dom-module id="input-element">
  <template>
    
    <app-data id="dataFirstName01" key="fName" data="{{firstname}}" ></app-data>
    <app-data id="dataLastName01"  key="lName" data="{{lastname}}" ></app-data>
      <h4>Input-Element</h4>
​
    <div>First Name: <span>{{firstname}}</span> Last Name: <span>{{lastname}}</span></div>
    <input type="text" name="input_fName" placeholder="First Name" value="{{firstname::input}}"></input>
    <input type="text" name="input_lName" placeholder="Last Name" value="{{lastname::input}}"></input>
​
  <div>Local First Name: </div>
        <input type="text" id="inputlocalname" placeholder="Local Name" value="Alice"></input>
  <button id="but" on-click="copy">Copy to global</button>
    </template>
​
</dom-module>
<script>
  Polymer({
    is:'input-element',
    copy: function () {
      this.firstname = this.$.inputlocalname.value;
      console.log(this.data02);
    }
  
  });
</script>
​
​
<!-- Output element -->
<dom-module id="output-element" >
  <template>
    <app-data id="data012" key="fName" data="{{data1}}" ></app-data>
    <app-data id="data012" key="lName" data="{{data2}}" ></app-data>
    <h4>Output-Element</h4>
    <div>First Name: <span>{{data1}}</span></div>
    <div>Last Name: <span>{{data2}}</span></div>
  </template>
​
</dom-module>
<script>Polymer({is:'output-element'});</script>
​
​
<!-- Body  -->
<body>
​
  <div>
    <template is="dom-bind">
      <app-data  key="fName" data="{{firstName}}" ></app-data>
      <app-data  key="lName" data="{{lastName}}" ></app-data>
​
      <h3>Name in Title: <span>{{firstName}}</span> <span>{{lastName}}</span></h3>
    </template>
​
    <input-element id="first-input"></input-element>
    <input-element id="second-input"></input-element>
    <output-element></output-element>
  </div>
  <p></p>
​
​
  <template is="dom-bind">
    <app-data key="fName" data="{{data1}}" ></app-data>
    <h3>Edit on top-level: </h3>
    <input type="text" name="input_fName" placeholder="First Name"
           value="{{data1::input}}"></input>
  </template>
​
​
</body>
​
​
​
​
​
​
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers