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
  • …
 
<!doctype html>
<html>
<head>
​
  <meta charset="utf-8">
​
  <meta name="description" content="shared-data element and repeats">
  
  <base href="http://milestech.net/components/">
  
  <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  
</head>
<body>
​
  <demo-test></demo-test>
​
  <script>
​
    (function() {
      var private_data = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
      Polymer({
        is: 'private-shared-data',
        properties: {
          data: {
            type: Object,
            notify: true,
            value: function() {
              return private_data;
            }
          }
        }
      });
    })();
​
    Polymer({
      is: 'xh-api-device',
      properties: {
        data: {
          type: Array,
          notify: true
        },
        _share: {
          value: document.createElement('private-shared-data'),
          observer: '_shareChanged'
        }
      },
      observers: [
        '_dataChanged(data.*)'
      ],
      _dataChanged: function(info) {
        this._share.fire('data-changed', info, {bubbles: false});
      },
      _shareChanged: function(share) {
        this.data = share.data;
        this.listen(share, 'data-changed', '_sharedDataChanged');
      },
      _sharedDataChanged: function(e) {
        this.fire(e.type, e.detail);
      },
      add: function(name) {
        this.push('data', {name: name});
      }
    });
​
  </script>
​
  <dom-module id="demo-test">
    <template>
​
      <h2>One</h2>
 
      <xh-api-device id="devices" data="{{data}}"></xh-api-device>
​
      <template is="dom-repeat" items="{{data}}">
        <div>name: <span>{{item.name}}</span></div>
      </template>
​
      <h2>Two</h2>
​
      <xh-api-device data="{{data2}}"></xh-api-device>
​
      <template is="dom-repeat" items="{{data2}}">
        <div>name: <span>{{item.name}}</span></div>
      </template>
​
      <br>
      <br>
​
      <button on-click="populate">Populate</button>
​
    </template>
    <script>
      Polymer({
        populate: function() {
          this.$.devices.add((Math.random()*100).toFixed(2));
          // this works too
          //this.push('data', {name: (Math.random()*100).toFixed(2)});
        }
      });
    </script>
  </dom-module>
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
sjmilespro
0viewers