Skip to content

Instantly share code, notes, and snippets.

@chuckh

chuckh/index.html

Created November 4, 2014 12:50
Show Gist options
  • Save chuckh/34c56bd5a666c4105285 to your computer and use it in GitHub Desktop.
Save chuckh/34c56bd5a666c4105285 to your computer and use it in GitHub Desktop.
Download ZIP
Polymer // source http://jsbin.com/deqabu
Raw
index.html
<!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>
@chuckh
Copy link
Author

chuckh commented Nov 4, 2014

From Rob Dodson at http://stackoverflow.com/questions/26635287/dynamically-generated-paper-dropdown-menu-initial-selection-issue.

One option would be to not render the dropdown until the data is available.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment