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="Testing configurable element entries-- starting point">
  
  <base href="http://polygit.org/components/">
  
  <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  
  <link href="paper-styles/index.html">
  <link href="paper-dropdown-menu/paper-dropdown-menu.html" rel="import">  
  <link href="iron-ajax/iron-ajax.html" rel="import">  
  <link rel="import" href="paper-menu/paper-menu.html">  
  <link rel="import" href="paper-item/paper-item.html">
  
</head>
<body>
​
  <change-aware>
    <my-element></my-element>
  </change-aware>
    
  
  <dom-module id="change-aware">
    <template>
      <content id="c"></content>
    </template>
    <script>
      Polymer({
        is: 'change-aware',
         attached: function(){
          this.set('_child', this.getEffectiveChildren('#c')[0])
          console.log("Child: ", this._child );
          
          // Simuating adding of an element
          setTimeout( function(){
            this._child.push('data',   {"name": "Caterogy THREE", "weight":"3", "id": "3" } );
          }.bind(this), 3000);
 
        }                   
      })
    </script>
    
  </dom-module>
  
  
  <dom-module id="my-element">
    <template>
      <iron-ajax url="http://output.jsbin.com/zonona/3.js" last-response="{{data}}" auto></iron-ajax>
      
      
      <!-- THE FOLLOWING PART SHOULD BE "CONFIGURABLE" -->
      <paper-dropdown-menu label="Your favourite category">
        <paper-menu class="dropdown-content">
         
          <template is="dom-repeat" items="{{data}}">  
            <paper-item>{{item.name}}</paper-item>
          </template>
          
      </paper-dropdown-menu>
      
    </template>
    
    <script>
      Polymer({
        is: "my-element",
                
        properties: {
          data: {
            type: Array,
            notify: true
          }
        },
      })
    </script>
  </dom-module>
   
 </body>
</html>
Output

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

Dismiss x
public
Bin info
mercmobilypro
0viewers