동적으로 생성 된 종이 드롭 다운 메뉴 I 동적으로 아래의 코드를 사용하여 큰 작업을하는 AJAX 데이터 소스에서 채워 종이 - 드롭 다운 메뉴를 생성하기 위해 노력하고있어 그래서

Question

초기 선택 문제 :

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

나는 이것이 '선정 된'pr 오페라는 드롭 다운의 템플릿이 바인딩되기 전에 설정됩니다.하지만 제 질문은 템플릿이 바인딩 될 때까지 'selected'속성 변경을 연기하거나 2) 그렇지 않으면 처음에 선택한 값을 안정적으로 설정하는 방법이 있는지 여부입니다. 드롭 다운 메뉴?

Answer 1

하나의 옵션은 데이터를 사용할 수있을 때까지 드롭 다운을 렌더링하지 않는 것입니다.

예 : http://jsbin.com/piyogo/13/edit 폴리머 1.0 (이상), 동일 다음 코드를 사용하여 얻을 수에 대한

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

Answer 2

:

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