Динамически генерируемая проблема первоначального выбора бумаги из выпадающего меню
Поэтому я пытаюсь динамически сгенерировать бумажное выпадающее меню, заполненное из источника данных AJAX, которое прекрасно работает, используя код ниже:
<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>
Но если я установлю исходный выбранный элемент равным либо значению опубликованного атрибута, либо значению, которое я установил в обратном вызове "готово", выпадающий пункт меню не будет выбран при загрузке элементов:
<script>
Polymer({
publish: {
selected: null
}
});
</script>
</polymer-element>
Я понимаю, что это происходит потому, что свойство selected выбрано до того, как шаблон в раскрывающемся списке становится связанным, но мой вопрос заключается в том, есть ли способ 1) отложить изменение свойства selected до тех пор, пока не будет привязан шаблон или 2) надежно установить изначально выбранное значение для выпадающего меню?
2 ответа
Один из вариантов - не отображать раскрывающийся список до тех пор, пока данные не станут доступны.
Например: 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>
Для Polymer 1.0 (и более поздних версий) того же можно достичь с помощью следующего кода:
<iron-ajax auto url={{url}} handle-as="json" last-response="{{items}}"></iron-ajax>
<template is="dom-if" if="{{items}}">
<paper-dropdown-menu-light label="[[label]]" no-animations selected-item="{{selected}}">
<paper-listbox class="dropdown-content">
<template is="dom-repeat" items="[[items]]">
<paper-item>[[item.name]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu-light>
</template>