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 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    <link rel="import" href="http://www.polymer-project.org/components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="http://www.polymer-project.org/components/paper-item/paper-item.html">
    <link rel="import" href="http://www.polymer-project.org/components/core-ajax/core-ajax.html">
  </head>
  <body>
​
<polymer-element name="foo-drop">
  <template>
    <core-ajax auto
               url="http://www.json-generator.com/api/json/get/bJMeMASvTm?indent=2"
               response="{{items}}"    
               handleas="json">
    </core-ajax>
    <template if="{{items}}">
      <paper-dropdown-menu selected="{{selected}}">
        <template repeat="{{item in items}}">
          <paper-item label="{{item.name}}"></paper-item>
        </template>
      </paper-dropdown-menu>  
    </template>
  </template>  
  <script>
    Polymer({
      publish: {
        selected: null
      }
    });
  </script>
</polymer-element>
​
<foo-drop selected="2"></foo-drop>
​
​
​
  </body>
</html>
Output 300px

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

Dismiss x
public
Bin info
robdodsonpro
0viewers