polymer - Dynamically-generated paper-dropdown-menu initial selection issue -

polymer - Dynamically-generated paper-dropdown-menu initial selection issue -

so i'm trying dynamically generate paper-dropdown-menu populated ajax info source, working great using code below:

<polymer-element name="my-element" attributes="selected"> <template> <core-ajax auto url="/api/items/" response="{{items}}" handleas="json"></core-ajax> <paper-dropdown-menu selected="{{selected}}"> <template repeat="{{items}}"> <paper-item name="{{id}}" label="{{name}}"></paper-item> </template> </paper-dropdown-menu> </template>

but if set initial selected item either value of published attribute, or value set in 'ready' callback, dropdown menu item not selected when items loaded:

<script> polymer({ publish: { selected: null } }); </script> </polymer-element>

i understand happening because 'selected' property beingness set before template in dropdown gets bound, question whether there way either 1) defer 'selected' property alter until after template bound or 2) otherwise reliably set selected value dropdown menu?

one alternative not render dropdown until info available.

ex: http://jsbin.com/piyogo/13/edit

<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>

drop-down-menu polymer web-component paper-elements