5

そこで、AJAX データ ソースから入力された paper-dropdown-menu を動的に生成しようとしています。これは、以下のコードを使用してうまく機能しています。

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

しかし、最初に選択した項目を公開された属性の値、または「ready」コールバックで設定した値のいずれかに設定すると、項目がロードされたときにドロップダウン メニュー項目が選択されません。

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

ドロップダウンのテンプレートがバインドされる前に「選択された」プロパティが設定されているためにこれが発生していることは理解していますが、私の質問は、1)テンプレートがバインドされるまで「選択された」プロパティの変更を延期する方法があるかどうかですまたは 2) そうでなければ、ドロップダウン メニューの最初に選択された値を確実に設定しますか?

4

2 に答える 2

4

1 つのオプションは、データが利用可能になるまでドロップダウンをレンダリングしないことです。

例: 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>
于 2014-10-30T20:37:02.800 に答える
3

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>
于 2016-07-11T09:57:46.267 に答える