javascript - polymer :所选项目未显示在纸张列表框中

Question

我正在寻找一种从纸张列表框中的下拉列表中正确选择元素的方法。使用此代码，我无法选择下拉列表中的一个元素。该元素显示在下拉列表中，但单击时不会显示为所选元素。

这是代码:

`<paper-dropdown-menu>
  <paper-listbox class="dropdown-content" attr-for-selected="value" selected="{{myElem}}">
    <template is="dom-repeat" items="[[myElems]]">
      <paper-item value="[[item.name]]">[[item.name]]</paper-item>
    </template>
  </paper-listbox>
</paper-dropdown-menu>`

{{myElem}} 的值为“aaa-bbb”。 (通过在 paper-listbox 元素上执行 $0.selected 获得此值)。

[[item.name]] 的值为“aaa-bbb”。 (通过在 paper-item 元素上执行 $0.value 获得该值)。

myElems 的值只是一个数组，包含一个元素。

Answer 1

尝试使用 paper-dropdown-menu 的 selectedItem 属性元素。

这是我的代码。注意_itemSelected监听器:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">

<dom-module id="stackoverflow-43054191">
  <template>

      <paper-dropdown-menu id="dropdown">
        <paper-listbox class="dropdown-content" attr-for-selected="value" selected="{{myElem}}">
          <template is="dom-repeat" items="[[myElems]]">
            <paper-item value="[[item.name]]">[[item.name]]</paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>

  </template>

  <script>
    Polymer({
      is: 'stackoverflow-43054191',

      properties: {

        myElems: {
          type: Array,
          value: [{'name': 'aaa-bbb'}]
        }

      },

      listeners: {
        'iron-select': '_itemSelected'
      },

      _itemSelected() {
        var which = this.$.dropdown.selectedItem.textContent;
        console.log(which); //"aaa-bbb" when it's selected
      }

    });
  </script>